element in span with ng-bind not displayed

Question

Here my problem.

<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">
   <span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>

In my controller, getToolTip() returns a string and same for getIcone(). The second span is never displayed and not present in the DOM.

But if i replace by this :

<span class="col-sm-3 col-md-3" >
   {{controller.getToolTip()}}
   <span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>

This time i can see my second span. Do you have an idea what is the problem

Answer 1

ng-bind-template directive replaces the element's content with the interpolation of the template in the ngBindTemplate attribute.

Read more here: https://docs.angularjs.org/api/ng/directive/ngBindTemplate

There is also a syntax error in the sample template. Quotes don't close and curly braces are needed in that case, like this:

<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">