CODEWITHSUNDEEP
angularjsdombindingnestedelement
Joe
Joe

Reputation: 2000

Nested Element binding in Angular

I'm running into an issue where I want to display a title label such that there is (i) A primary title which appears as an h1 element and (ii) A sublabel within the h1 element but enclosed in the tag

Doing this works:

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

My issue with that code though is that the brackets and names for rootLabel and rootSubLabel are visible in the browser until angular properly reads them.

I've found that I can mask that issue by using Angulars ng-bind instead:

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

Unfortunately the second bind doesn't get rendered by Angular though.

What I'm wondering is how would something like this be done properly in Angular?

Upvotes: 0

Views: 139

Answers (1)

yangli-io
yangli-io

Reputation: 17334

This is because 

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

will replace everything inside the h1 with {{rootLabel}}

The correct way to use ng-bind in this case should be

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

Upvotes: 1

Related Questions