AngularJS使用带有ng-repeat的$ sce.trustAsHtml

时间:2014-06-27 19:08:09

标签: javascript angularjs angularjs-ng-repeat ng-bind-html ngsanitize

我试图将$ sce.trustAsHtml()与ng-repeat中的对象属性一起使用。结果是HTML完全空白。 HTML尽管使用ngSanitize正确输出。

<div ng-repeat="question in questions">
    <p ng-bind-html="$sce.trustAsHtml(question.body)">
    </p>
</div>

顺便提一下,我在AngularJS v1.3.0-beta.3上。不确定是否有错误或我做错了什么。

2 个答案:

答案 0 :(得分:30)

您不能在表达式中使用$sce.trustAsHtml(除非$sce$scope上的属性),因为表达式是在$scope的上下文中计算的

最干净的方法是使用ngSanitize 第二个最干净的方法是将$sce.trustAsHtml公开为$scope中的函数:

<div ng-repeat="...">
    <p ng-bind-html="trustAsHtml(question.body)"></p>
</div>

$scope.trustAsHtml = $sce.trustAsHtml;

答案 1 :(得分:14)

或者有一个过滤器:

angular.module('myApp')
    .filter("sanitize", ['$sce', function($sce) {
        return function(htmlCode){
            return $sce.trustAsHtml(htmlCode);
        }
}]);

in html:

<div ng-bind-html="question.body | sanitize"></div>