data-ng-bind-html 有效，但不能使用卷曲的 {{}} 括号

Question

所以当我使用此代码时，data-ng-bind-html 正确显示主题，但当我实际使用 topic.pagetitle 时，什么也没显示，有一个空标签。有谁知道会发生什么？

<div class="well">
<ul class="filterByTopic">
    <li ng-repeat="topic in topics">
        <a href="" data-ng-bind-html="topic.pagetitle" ng-class="{active: topic.id == activeTopic}">{{topic.pagetitle}}</a>
    </li>
</ul>
</div>

Answer 1

您正在尝试在安全上下文中使用不安全的值。请参阅严格的上下文转义

Answer 2

ngBindHtml通过在元素上设置 innerHTML 来工作。这意味着您放入该标记中的任何内容都将被 ngBindHtml 值覆盖。该指令的文档顶部提到了这一点 https://docs.angularjs.org/api/ng/directive/ngBindHtml

下面是一个示例（为简洁起见，缺少代码）：

控制器

...
scope.foo = '<b> I am the foo </b>'
scope.bar = 'Bar'
...

视图

<div ng-bind-html="foo">{{ bar }}</div>
<div ng-bind-html="foo"></div>
<div>{{ bar }}</div>

浏览器

我是福
我是福
酒吧