Question

我正在使用带有弹出窗口的twitter bootstrap，并且正确显示了AngularJS范围变量。以下是有效的。

(data-content="{{notifications[0].user}} shared {{notifications[0].user_two}}'s records")

当我添加以下内容时

(data-content="<b>{{notifications[0].user}} shared {{notifications[0].user_two}}'s records</b>")

不会显示任何错误，但所有{{}}都不再呈现。

所以我尝试将其作为各种测试

(data-content="<div ng-repeat='item in notifications'>test {{item}} <br/><hr/></div>")

与上一个例子非常相似，我看到的是“测试”而不是{{item}}。而“测试”只显示一次，即使通知有三个元素。当我看到DOM时，就是这个

<div class="popover-content">
    <div ng-repeat="item in notifications">you  <br><hr></div>
</div>

我也试过创建一个指令来迭代数组并生成我想要的输出，但是我设置数据内容等于指令的尝试都是失败的。我在其他地方找到的例子我很有信心可以工作，但我只是想在开始实现类似这样的事情（http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service）或（Html file as content in Bootstrap popover in AngularJS directive）之前确认我并不缺少一个直截了当解决我上面概述的问题，不需要我创建指令。

编辑：

Plunkr Url http://plnkr.co/edit/VZwax4X6WUxSpUTYUqIA?p=preview

Answer 1

html可能会破坏它，尝试使用$ sce

将其标记为可信赖的html

How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

<button ... data-content="trustedHtml" ...> </button>

AngularJS + Twitter Popover：内容迭代

1 个答案: