AngularJS在元素上嵌套ng-bind

时间:2014-08-05 14:51:08

标签: javascript angularjs ng-bind

想想我在这里错过了一些简单的东西,但这是我的问题:

 <h4 ng-bind="example.heading">
  <small ng-bind="example.subheading"></small>
 </h4>

不起作用 - 如果ng-bind替换了代码中的内容,那么我是否必须使用{{}}语法?像这样,

<h4>{{example.heading}}<small ng-bind="example.subheading"></small></h4>

我喜欢括号不会短暂闪烁的想法所以我选择了ng-bind。还有另一种解决方法吗?

2 个答案:

答案 0 :(得分:3)

要防止括号闪烁,请使用ng-cloak隐藏编译Angular:

<body ng-controller="myCtrl" ng-cloak>
    <h4>{{example.heading}}<small ng-bind="example.subheading"></small></h4>
</body>

答案 1 :(得分:0)

ng-cloack是解决方案。

如果你想使用它,请不要忘记添加以下css

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}