AngularJS中如何在ng-repeat中使用$sce.trustAsHtml？

Question

我正在尝试在ng-repeat中使用$sce.trustAsHtml()处理对象属性，但结果是HTML完全为空。不过，使用ngSanitize可以正确输出HTML。

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

顺便说一下，我正在使用AngularJS v1.3.0-beta.3。不确定是程序有问题还是我的操作有误。

- ZoM

Answer 1

在表达式中（除非 $sce 是 $scope 上的属性），否则您不能使用$sce.trustAsHtml，因为表达式是在$scope的上下文中计算的。

最清晰的方法是使用ngSanitize。
第二种最清晰的方法是将$sce.trustAsHtml公开为$scope中的函数:

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

$scope.trustAsHtml = $sce.trustAsHtml;

- gkalpak

---

感谢您的解释。我在服务中使用$sce遇到了麻烦 - 只有在过滤器和指令中才有效。 - Artjom Kurapov

这正是我所寻找的，而且简短、简单又甜美。谢谢！ - haakon.io

在控制器中使用 $sce.trustAsHtml(questions) 并仅使用 <p ng-bind-html="question.body"></p> 如何？ - Hardik Mishra

@HardikMishra，这也是可能的（而且比将其放在模板中更好）。 - gkalpak

Answer 2

或者使用过滤器：

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

在HTML中：

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

- Moin Haidar

---

它不为我清理htmlCode。 - Thunfische