How to set inner html through a html tag with angularjs?

Question

In my html I use a layout like this:

<h2>{{translation.settings}}</h2>

As you might guess, I am using a multi language setup.

Now, for some reason I am required to bind the angularjs controllers later than normal and so for a brief moment {{translation.settings}} is rendered on my page.

Obviously this is not preferable.

I have been working with knockout for a while and one way to handle such a inconvenience is to set the element's value through a html tag, e.g.:

<h2 data-bind="text: translation.settings"></h2>

Is there a way in angularjs to set the inner element's text-value through a html-tag?

Or, since this is a possible XY problem, can I suppress the rendering of {{translation.settings}} in the <h2> element?

score 2 · Accepted Answer · answered Jan 03 '16 at 20:55

2

To prevent to show the template before it get a value use ng-cloack directive. You can use documentation here https://docs.angularjs.org/api/ng/directive/ngCloak

answered Jan 03 '16 at 20:55

Kingmaker

469
1
6
20

Great, this seems to hide the values indeed. – Stefan Jan 03 '16 at 20:59
@Stefan but rather you could also use `ng-bind` there instead of using `{{}}` interpolation directive – Pankaj Parkar Jan 03 '16 at 21:00
@PankajParkar: I'll have a look at that as well. I have to say, I am fairly new to angular, so can you explain why this is preferable? – Stefan Jan 03 '16 at 21:02
@PankajParkar: ah, as I understand it `ng-bind` is the knockout's equivalent as I mentioned in the question. Thanks. – Stefan Jan 03 '16 at 21:03
@Stefan look at the answer http://stackoverflow.com/questions/16125872/angularjs-why-ng-bind-is-better-than-in-angular – Pankaj Parkar Jan 03 '16 at 21:04
@PankajParkar: thanks, that's exactly what I wanted to know. – Stefan Jan 03 '16 at 21:05

How to set inner html through a html tag with angularjs?

1 Answers1