support for markup inside translated strings

[lanterndev]

Sometimes you need to translate something like:

<p>If your download does not begin automatically, <a href="...">click here</a>.</p>

Or even just:

<p>Another translated string with just a <em>tiny</em> bit of markup inside it.</p>

Seems like a common use case but didn't see it documented, so I thought I'd open a ticket.

What's the best way to achieve this? You could divide the single translated string into three parts (e.g. before_markup, inside_markup, after_markup), but this doesn't scale to more nested markup:

<p>Then I asked, <q>Did you just say <cite><a href="..."><q>nested markup</q></a></cite>?</q></p>

In a case like this, it would be nice to include everything in the <p> element in a single translated string, and each translation would include the necessary contained markup. Is this possible?

ng-bind-html and ng-bind-html-unsafe can be used to include sanitized or unsanitized markup. Do they help? Ideally the angular-translate-injected markup could also support live angular behavior too:

<p>To open now, <a ng-click="handleOpen()">click here</a>.</p>

Is that possible?

Thanks for reading, and thanks for the great work on angular-translate!

[0x-r4bbit]

Hey @Skivvies !

You're right, this is a common use case and angular-translate doesn't cover this very well.
But yea, just like you said, you could either split up the contents into different translations and go with a directive/filter combination, or you put the html in the translation itself and in view-layer you use ng-bind-html-unsafe to get it out properly. :)

This is exactly how I use it. If you have any idea how to make this better (at least in theory) lemme know! :)

[lanterndev]

Thanks for the super fast response! Is there an example of how you use it
with ng-bind-html-unsafe kicking around somewhere I could take a look at?
And does that support live angular behavior in the markup? If not do you
know how hard that would be to add?

On Sunday, June 2, 2013, Pascal Precht wrote:

Hey @Skivvies https://github.com/skivvies !

You're right, this is a common use case and angular-translate doesn't
cover this very well.
But yea, just like you said, you could either split up the contents into
different translations and go with a directive/filter combination, or you
put the html in the translation itself and in view-layer you use
ng-bind-html-unsafe to get it out properly. :)

This is exactly how I use it. If you have any idea how to make this
better (at least in theory) lemme know! :)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/69#issuecomment-18810642
.

[0x-r4bbit]

Wait a sec, I'll set up a plunk for you

[0x-r4bbit]

Here you go: http://plnkr.co/edit/oyTsOV?p=preview

The plunk shows, how to use translation id's with ng-bind-html-unsafe. It also shows, that it doesn't work with bindings :(

And unfortunately I can not say how hard that is to implement. Have to take a deeper look at it, but we're currently working on pluralization. I hope you can live with that for now?

[lanterndev]

Thank you so much for taking the time to write the plunk. I've been away
from the computer since this morning but I look forward to checking it out
when I get back.

I'm following progress on the pluralization work, interested in that too.
Will look out for ways I can help.

On Sunday, June 2, 2013, Pascal Precht wrote:

Here you go: http://plnkr.co/edit/oyTsOV?p=preview

The plunk shows, how to use translation id's with ng-bind-html-unsafe. It
also shows, that it doesn't work with bindings :(

And unfortunately I can not say how hard that is to implement. Have to
take a deeper look at it, but we're currently working on pluralization. I
hope you can live with that for now?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/69#issuecomment-18812266
.

[0x-r4bbit]

Awesome :) Ideas and Pull Requests are always welcome! :)

So can I close this one for now?

[lanterndev]

Hey @PascalPrecht, it looks like using a new directive along the lines of the angular-html-bind directive from http://jsfiddle.net/andytjoslin/ctyfg/22/ rather than ng-bind-html-unsafe might do the trick. I'll give this a shot.

In the meantime, if you'd be open to one of us adding something to the docs demonstrating the included-markup use case, we could leave this open until then, or for sure feel free to just close the issue too.

[0x-r4bbit]

Feel free to update the docs! :) Either in the wiki or the auto generated docs under docs folder. Just make a Pull Request to canary and I'll merge it in! :)

[lanterndev]

Thanks @PascalPrecht, when I have a patch I'll convert this issue into a pull request and attach some commits!

[0x-r4bbit]

This'd be awesome! :)

On Friday, June 14, 2013, skivvies wrote:

Thanks @PascalPrecht https://github.com/PascalPrecht, when I have a
patch I'll convert this issue into a pull request and attach some commits!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/69#issuecomment-19430837
.

/pp Sent from Gmail Mobile

[0x-r4bbit]

Closing this for now

[austinkottke]

Did anyone get this working ? So we can insert html ?

[ichernev]

ng-bind-html-unsafe is deprecated, and $sce.trustAsHtml should be used in conjunction with ng-bind-html. Is this implemented right now in translate?

[knalli]

That is for AngularJS 1.2+, isn't it?

Translate depends currently on stable angular ( which is 1.0).

@PascalPrecht perhaps introducing the next major with early 1.2 support?

[guilload]

I could really use this feature too :)

[0x-r4bbit]

@guilload @knalli Actually it turned out, when using html within translations and using translate directive instead of translate filter, the given html is parsed and interpreted correctly. So you should stick with translate directive until we introduce a new angular-translate 2 version which officially supports angular 1.2

[guilload]

Great!

[lanterndev]

I recently took a crack at a directive that would allow live angular bindings inside translations:

  .directive('compileUnsafe', function ($compile) {
    return function (scope, element, attr) {
      scope.$watch(attr.compileUnsafe, function (val, oldVal) {
        if (!val || (val === oldVal && element[0].innerHTML)) return;
        element.html(val);
        $compile(element)(scope);
      });
    };
  })

Here is an example plunk that demonstrates it in action: http://plnkr.co/edit/Stb6IexTjG0AfzrB896Z?p=preview

Not confident this is the best way to implement this, so feedback would be much appreciated!

[lanterndev]

Oh, just saw the new translate-compile directive in angular-translate 2.0 (congrats on the new release!) in http://angular-translate.github.io/docs/#/guide/05_using-translate-directive. That page doesn't actually demonstrate any live bindings inside a translated string though. I updated my plunk to demonstrate this next to the compile-unsafe method I've been using with angular-translate < 2.0:

http://plnkr.co/edit/Stb6IexTjG0AfzrB896Z?p=preview

[jkrot]

I think the example on the directive could be better but it works out of box with 2.0.

[mikkark]

The original question was also about using links and actually I'm not able to get that to work. I have a situation where I would like to feed the href url from the scope using curly braces. I have a plunker here: http://plnkr.co/edit/8eArYIXlcpybRqfhwcsl?p=preview. This is probably more a question of understanding how Angular works.

[tspaeth]

As of the current version (please don't refer or use to 2.0.0 anymore as it is very old now), you can use it in the directive (your second example) this way:

<div translate="TESTING" translate-compile translate-values="{'redirectUrl':redirectUrl}"></div>