0

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

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Benjamin Lombart
  • 1
  • 2

1 Answers1

0

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()}}">
Bill P
  • 3,622
  • 10
  • 20
  • 32
  • Thanks for your answer, yes you're right. I try different things and i made a mistake in my post. So, the only way to display the second span is to use interpolation instead of ng-bind-template (or ng-bind) ? – Benjamin Lombart Dec 13 '19 at 15:50
  • You can always follow another approach using a custom directive. ng-bind and ng-bind-template both replace the content – Bill P Dec 13 '19 at 16:01