Как вывести html через шаблон AngularJS?

<h1>{{ revision.title }}</h1>

<div ng-bind-html="revision.content"></div>

Название выводится отлично, но контент - нет. Он получил некоторые html в нем, и я получаю следующую ошибку: Attempting to use an unsafe value in a safe context., которая описывается так: http://docs.angularjs.org/error/ $sce: небезопасно и это нормально, но потом как я могу выводить содержимое, так как в нем будет какой-то html, поэтому я должен установить его на {{ revision.content | safe }} или smthn. Каков правильный путь?

EDIT:

Версия AngularJS: 1.2

Ответ 1

Итак, это исправление:

включить angular-sanitize.min.js из http://code.angularjs.org/ и включить его в свой модуль:

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

а затем вы можете использовать ng-bind-html

Ответ 2

Я создал директиву ng-html, которая делает ту же самую основную вещь, что и ng-bind-html-unsafe. Однако я настоятельно рекомендую вам использовать его с осторожностью. Он может легко открыть ваш сайт до вредоносных атак. Так что знайте, что вы делаете, прежде чем выполнять его:

.directive('ngHtml', ['$compile', function($compile) {
    return function(scope, elem, attrs) {
        if(attrs.ngHtml){
            elem.html(scope.$eval(attrs.ngHtml));
            $compile(elem.contents())(scope);
        }
        scope.$watch(attrs.ngHtml, function(newValue, oldValue) {
            if (newValue && newValue !== oldValue) {
                elem.html(newValue);
                $compile(elem.contents())(scope);
            }
        });
    };
}]);

И тогда вы будете использовать его как:

<div ng-html="revision.content"></div>

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

Ответ 3

Я знаю это более старый вопрос, но вы также можете доверять этому значению с помощью $sce в вашем контроллере:

$scope.revision.content = $sce.trustAsHtml($scope.revision.content);

После этого ng-bind-html будет работать.

Ответ 4

Какую версию вы используете? Если вы используете менее 1,2, вы можете попробовать ngBindHtmlUnsafe

Ответ 5

в соответствии с Официальный документ AngularJs о ngBindHtml вы должны ввести ngSanitize в зависимости от приложения

Вычисляет выражение и вставляет полученный HTML в элемент безопасным способом. По умолчанию полученный HTML-контент будет быть подвергнуто санитарной обработке с использованием услуги санитарии $. Использовать это функциональности, убедитесь, что $sanitize доступна, например, включая ngSanitize в ваших зависимостях модулей (не в ядре Angular). Чтобы использовать ngSanitize в зависимостях вашего модуля, вам нужно включить "angular -sanitize.js" в ваше приложение.

Затем вы можете установить модуль ngSanitize туда способами:

1 - использование беседки

bower install --save angular-sanitize

2 - используя npm

npm install --save angular-sanitize

3 - вручную загрузите angular-sanitize.js файл из code.angularjs.org, который включает в себя все файлы категорий angularJs по номеру версии, например < ответ href= "/info/188062/how-to-output-html-through-angularjs-template/1040540#1040540" > @Xeen

Подробнее о модуле install ngSanitize из Официальный галочный репозиторий angularJs для установки angular -sanitize