Question

这是一个建立在AngularJS v1.2.12上的工作小提琴：http://jsfiddle.net/X4Xd3/

我遇到的问题是：我正在从Web服务返回一组对象。（这个小提琴通过对数组进行硬编码来简化这一点。）数组中的每个对象都有一个包含html字符串的属性，我想将其呈现给页面。我通过遍历数组并通过$ sce创建一个额外的属性来实现这一点。

function ctrl($scope, $sce, $log) {
    $scope.friends = [
        {name:'John', age:25, gender:'boy', notes: '<p class="p">This is <strong>html</strong> content!</p>'},
        {name:'Jessie', age:30, gender:'girl', notes: '<p class="p">&laquo; This is <strong>html</strong> content!</p>'}
    ];

    for(var i = 0;i < $scope.friends.length; i++) {
        $scope.friends[i].trustedNotes = $sce.trustAsHtml($scope.friends[i].notes);
    }
}

如果数据看起来很熟悉，那是因为我从ngRepeat上的AngularJS文档中借用了它。

我已经测试了以下绑定到html的方法：

<ul>
    <li ng-repeat="friend in friends">
        {{ friend.notes }} <!-- shows escaped html; I expected this -->

        {{ friend.trustedNotes }} <!-- also shows escaped html -->

        <div ng-bind-html="friend.trustedNotes"></div> <!-- works, but wraps html in div -->
    </li>
</ul>

所以，我的问题是双重的：

这种“for-loop”方法是显示每个对象的html的最佳方式吗？
是否可以在没有包装元素的情况下使用ngBindHtml？

Answer 1

要解决您的第二个问题，如果您只想将HTML设置为<li>的innerHTML，则可以将ng-bind-html应用于<li>本身：

<li class="animate-repeat" ng-repeat="friend in friends" ng-bind-html="friend.trustedNotes"></li>

如何使用AngularJS显示HTML属性

1 个答案: