Angular中的嵌套元素绑定答案

【问题标题】：Nested Element binding in AngularAngular中的嵌套元素绑定
【发布时间】：2015-02-19 04:36:59
【问题描述】：

我遇到了一个问题，我想显示一个标题标签，这样有（i）一个显示为 h1 元素的主标题和（ii）一个 h1 元素内但包含在标签中的子标签

这样做很有效：

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

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

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

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

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

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

【问题讨论】：

【解决方案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>

【讨论】：