Question

在这里试着理解Angular 1.2中的$sce服务

我有一个从REST API中提取的对象数组。我将获取返回的对象并将一些客户评级信息附加到该对象。我添加了一个rating密钥，用于存储5个平均分数。我还添加了一个rateDisplay密钥，用于构建平均分数的直观表示。

对象是这样的：

{ 
    name: "Awesome, Inc.",
    id: "23423121",
    ...
    rating: "5/5",
    rateDisplay: "<span class='icon-circle'></span><span class='icon-circle'></span><span class='icon-circle'></span><span class='icon-circle'></span><span class='icon-circle'></span>"
}

显然，当我有这样的HTML时：

<tr ng-repeat="business in businesses">
    <td>{{ business.name }} <br/> {{ business.rateDisplay }}</td> 
</tr>

仅显示rateDisplay的字符串表示形式，而不是所需的HTML输出。

如果我修改我的JS以包含$sce.trustAsHtml方法，我能够看到rateDisplay的HTML输出，但我的其他数据不再显示，我仍然得到错误Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

此时的HTML如下所示：

<tr ng-repeat="business in businesses" ng-bind-html="business.rateDisplay">
    <td>{{ business.name }} <br/> {{ business.rateDisplay }}</td>
</t>

这是我服务的一部分，更详细一点（拿出一个大的，无关紧要的部分，让我知道你是否想看到整个事情）：

listRatings: function(names, businesses) {
    // avgFinal and fullRating constructed before this
    for (var business in businesses) {
        if (businesses[business].id === names[name]) {
            businesses[business].rating = avgFinal;
            businesses[business].rateDisplay = $sce.trustAsHtml(fullRating);    // y u no work!
        }
    }
};

然后我在控制器中调用，传入存储在names数组中的业务ID和$scope.businesses businesses参数。

在保留同一对象数组中存储的其他数据的同时，我应该如何清理我的rateDisplay？我应该考虑其他消毒方法吗？

Answer 1

就我注意到，

businesses是一个对象。所以你应该以不同的方式写ng-repeat;

<tr ng-repeat="(key, value) in businesses" ng-bind-html="value.rateDisplay"></t>

Answer 2

我采用了不同的路线并将ngSanitize作为依赖关系，因此我可以在不使用ng-bind-html服务的情况下严格使用$sce。

使用$ sce在对象中的单个属性上使用ng-bind-html

2 个答案: