AngularJS nested ng-bind on elements

Question

Think I'm missing something simple here but here's my issue:

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

Doesn't work - if ng-bind replaces the content inside the tag, then would I have to use the {{}} syntax instead? Like so,

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

I like the idea of the brackets not flashing up briefly so I picked ng-bind. Is there another way around this?

tymeJV · Accepted Answer · 2014-08-05 14:52:57Z

3

To prevent the brackets from flashing, use ng-cloak to hide compiling Angular:

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

answered Aug 5, 2014 at 14:52

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Polochon · Accepted Answer · 2014-08-05 14:56:52Z

0

ng-cloack is the solution.

Dont forget to add the following css if you want to use it

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

answered Aug 5, 2014 at 14:56

Polochon

2,22916 silver badges13 bronze badges

Good point to note. I'm using MeanJS so that's already included.