Use ui-sref in .po translation file for angular-gettext

Question

everyone. Here is my issue.

I use angular-gettext for translations and in my HTML I got

<span ng-bind-html="myCtrl.textToTranslate|translate"></span>

in my en-EN.po file I have:

msgid "Text to translate"
msgstr "This is <strong>my text</strong> "
"to translate and I want to use a link that "
"redirects me <a ui-sref="app.link.to.go">here</a>."

I managed to use the html tags as <strong></strong> in the translated version and it works, but the angular ui-sref redirect doesn't work. The result in the browser is <a>here</a>

I suppose it's some kind of quotes issue or something.. I tried with backslash escaping and single quotes ui-sref=\\"app.link.to.go\\" & ui-sref='app.link.to.go' but without success.

Any ideas?

Answer 1

Angular has to compile html to process directives, so the translated string needs to be compiled prior to inserting it to DOM. You can either call translate and then compile in your controller or create a new directive like bind-compiled-html that will call translate on the html contents.