Nested Element binding in Angular

Question

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?

yangli-io · Accepted Answer · 2015-02-19 04:48:48Z

1

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>

answered Feb 19, 2015 at 4:48

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

Nested Element binding in Angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related