Angular中的嵌套元素绑定

Question

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

这样做有效：

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

我对该代码的问题是，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> 

将用{{rootLabel}}

替换h1中的所有内容

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

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