динамически отображать HTML-страницы AngularJS

Question

Привет, я не смог найти подходящее рабочее решение. Пожалуйста, помогите мне.

У меня есть одностраничное приложение с ui-selects на странице, в основном это список каталогов. Пользователь будет выбирать папки и, наконец, когда он/она выбирает HTML-файл в списке, я создаю URL-адрес, и я должен отображать html-файл в моем спа-центре. Мне удалось отобразить текстовые файлы, но я не знаю, как отображать html-файлы. Я попробовал ng-bind-html, но не знаю, как это отобразить.

Я получаю содержание HTML, используя $ http.get метод и сохранение содержимого HTML в переменной с именем «contentHTML» Мне нужно, чтобы показать, что

Answer 1

Ваш вопрос с угловой обеззараживание. Он не позволит вам использовать ng-bind-html, пока вы не вставьте свой HTML-контент в специальную переменную, помеченную как надежный HTML. Угловой заставляет вас делать это, чтобы вы знали, что вы очень четко говорите Угловое, что можно сделать эту разметку.

Это помогает защитить среднего разработчика от непреднамеренного ввода пользовательского ввода, что было бы очень опасно. Вы не хотите, чтобы пользователи отправляли javascript в поля ввода, а затем ваше приложение отображало этот скрипт прямо на странице где-то. Если это так, вредоносный скрипт будет запускаться при визуализации и может вызвать всевозможные хаосы.

Вам необходимо включить модуль ngSanitize в зависимости от вашего приложения.

var app = angular.module('myApp', ['ngSanitize']); 

Не забудьте включить в ваши ссылки на скрипт с угловым санированием.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script> 

Затем вам нужно пометить свой контент HTML, как безопасный для визуализации с использованием $sce службы.

app.controller('myController', function ($scope, $sce) { 
    $scope.trustedHtml = $sce.trustAsHtml(contentHTML); 
}); 

Только после этого будет ng-bind-html работы.

<div ng-bind-html="trustedHtml"></div> 

Демо: http://codepen.io/Chevex/pen/xGYydr?editors=101

Answer 2

Я думаю, что вы ищете ngInclude.
Вам даже не нужно обращаться с запросом AJAX, это сделано для вас.

Извлекает, компилирует и включает внешний фрагмент HTML.

Использование

<ANY 
    ng-include="path_of_your_file.html" 
    [onload="string"] 
    [autoscroll="string"]> 
    ... 
</ANY> 

Важные вещи, чтобы отметить:

• Ваш HTML файл должен быть в том же домене или это становится сложнее (см Документах)
• Это шаблон, который означает:
  • Все относительные пути будут относительно текущего пути, а не пути импортированного шаблона
  • Угловое в нем будут оценены

Answer 3

Для отображения HTML от contentHtml вам нужно иметь DIV на вашей HTML странице, как:

<div ng-controller="htmlBucket"> 
    {{content}} 
</div> 

Затем в JavaScript вы должны иметь этот

app.registerCtrl('htmlBucket', function($scope) 
{ 
    $scope.content = $sce.trustAsHtml(contentHTML); 
}); 

Не забудьте указать ваши .js, jquery и угловую зависимость cies к вашему HTML

<script src="lib/jquery/jquery.js"></script> 
<script src="lib/angular/angular.js"></script> 

Надеюсь, это поможет.

Answer 4

Вы можете получить то, что ищете, используя ui-router. Here - ссылка для этого же.

используя ui-select, когда пользователь выбирает папки. напишите триггер события в своем контроллере, чтобы изменить URL-адрес на ваш предопределенный. используя $ stateProvider. Вы также можете увидеть их пример для того же here

Надежда, что помогает