Angularjs translate in nested tag

Question

Good day,

I'm trying to translate using the directive way this portion of html

<h1>First text to translate<small>Second text to translate</small></h1>

But I encounter some difficulties. For example if I try:

<h1 translate>KEY<small>Second text to translate</small></h1>

the key will not be translated and I see it on the page and if I try:

<h1 translate="KEY"><small>Second text to translate</small></h1>

this time the key is translated but the second text disappear.

To make it work I must use the translate service inside the controller or remove the nesting. Any advice?

Indeed very good explanation refer this link http://stackoverflow.com/questions/20540877/correct-use-for-angular-translate-in-controllers — TheKingPinMirza, Aug 14 '15 at 11:03

score 4 · Accepted Answer · answered Aug 14 '15 at 10:59

4

You can use it as a filter instead of directive:

<h1>{{'KEY' | translate}}<small>{{'Second text to translate' | translate}}</small></h1>

answered Aug 14 '15 at 10:59

Mike Jerred

1 Answers1