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?

score 3 · Accepted Answer · answered Aug 05 '14 at 14:52

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 05 '14 at 14:52

tymeJV

score 0 · Answer 2 · answered Aug 05 '14 at 14:56

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 05 '14 at 14:56

Polochon

Good point to note. I'm using MeanJS so that's already included. – Mr Office Aug 05 '14 at 15:15

2 Answers2