$ sce.trustAsHtml vs. ng-bind-html

Почему я не могу этого сделать:

<div>{{data | htmlfilterexample}}</div>

Когда, внутри фильтра, я возвращаюсь:

return $sce.trustAsHtml(input);

Использование <div ng-bind-html="data | htmlfilterexample"></div> работает независимо от того, возвращается ли фильтр input или $sce.trustAsHtml(input).

У меня создалось впечатление, что $sce делает HTML trustworth и ng-bind-html не нужен для вывода, возвращаемого этим методом.

Спасибо.

Ответы

Ответ 1

$sce.trustAsHtml() создает строку, безопасную для использования с ng-bind-html. Если бы вы не использовали эту функцию в строке, тогда ng-bind-html дало бы ошибку: [$sce:unsafe] Attempting to use an unsafe value in a safe context. So $sce не избавляется от необходимости в ng-bind-html, а делает ее безопасной используйте с ним.

Конкретная проблема, с которой вы сталкиваетесь, заключается в различии между ng-bind и ng-bind-html

Использование {{}} эквивалентно ng-bind. Итак, глядя на исходный код ng-bind (ng-bind- * исходный код), мы видим, что он использует это:

element.text(value == undefined ? '' : value);

while ng-bind-html, между прочим, делает следующее:

var parsed = $parse(attr.ngBindHtml);
element.html($sce.getTrustedHtml(parsed(scope)) || '');

Основной вывод, заключающийся в том, что использование ng-bind .text (http://api.jquery.com/text/) приводит к текстовому представлению строки (игнорируя, является ли он надежным HTML).

В то время как ng-bind-html использование .html (http://api.jquery.com/html/) приводит к интерпретируемой HTML версии (если объявлено безопасным getTrustedHtml())