Angular 中的嵌套元素绑定

Question

我运行遇到一个问题，我想显示一个标题标签，以便 (i) 显示为 h1 元素的主标题和 (ii) h1 元素中的子标签但包含在标签中

这样做有效：

<div id="banner">
        <h1>
           {{rootLabel}}
           <span><small>{{rootSubLabel}}</small></span>
        </h1> 
    </div>

我对该代码的问题是，在 angular 正确读取它们之前，rootLabel 和 rootSubLabel 的括号和名称在浏览器中可见。

我发现我可以通过使用 Angulars ng-bind 来掩盖这个问题：

<div id="banner">
        <h1 ng-bind="rootLabel">
           <span><small ng-bind="rootSubLabel"></small></span>
        </h1> 
    </div>

不幸的是，Angular 没有渲染第二个绑定。

我想知道如何在 Angular 中正确地完成这样的事情？

Answer 1

这是因为

<h1 ng-bind="rootLabel">
   <span><small ng-bind="rootSubLabel"></small></span>
</h1>

将 h1 中的所有内容替换为 {{rootLabel}}

在这种情况下正确使用 ng-bind 的方法应该是

<h1>
   <span ng-bind="rootLabel"></span>
   <span><small ng-bind="rootSubLabel"></small></span>
</h1>

Nested Element binding in Angular