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

Question

<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: unsafe, и это нормально, но тогда как я могу вывести контент, так как в нем будет какой-то HTML, и поэтому я должен установить его на {{ revision.content | safe }} или что-то Какой правильный путь?

РЕДАКТИРОВАТЬ:

Версия AngularJS: 1.2

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

Я создал 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>

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

Answer 4

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

Answer 5

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

Оценивает выражение и вставляет полученный HTML-код в элемент безопасным способом. По умолчанию полученный HTML-контент будет очищен с помощью службы $sanitize. Чтобы использовать эту функциональность, убедитесь, что $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 по номеру версии, например @Xeen answer

Подробнее об установке ngSanitize модуль из репозитория Oficial angularJs github для установки angular-sanitize