Angular.js: Google Translate causes bindings to break

[darrenmerrett]

Hi,

I have been investigating a problem that some of my users have reported. After weeks of investigation I have tracked down the problem to Google translate.

I know this is technically a Google translate issue, but as Angular is a Google product and I'm not sure how to report a bug with Google translate, I thought I'd start here.

The problem occurs when someone tries to translate a page using Google translate. It seems that the extension replaces HTML with translated text which of course breaks the 2 way binding.

After some investigation I see I can add a class "notranslate" to each of the elements that have a binding, but this seems quite a messy solution. The obvious solution would be for Google translate to ignore all elements with a class "ng-binding", but I'm sure Google can find a more elegant solution.

Darren

[frfancha]

It is difficult to imagine a good solution to let them work together...
Even if google translate waits for the text output by angular before translate, instead of translating angular expressions in {{}}, after that angular would compare the translated version which would no more be in synch with the model and erases the translation...

We write a big multi-language application, and the translation are encoded in our database.
Angular is marvelous for that:the user can change his/her language setting at any time using the application and the angular bindings makes all the display adapted, without any google translate.

[darrenmerrett]

Thanks for your comment. Our application is written in English but some users translate it into their native language.

Let me be more specific. An example would be

<li>
Bonus page in <span class="white" highlighter="data.bonus">{{ data.bonus }}</span>
</li>

Where data.bonus is an integer.

Google translate translates the text and translates the number and loses the binding. If I add "notranslate" as a class to the span element, then the text is translated and the binding remains intact which is the desired outcome.

The hack that I've put in place is on $viewContentLoaded - $(".ng-binding").addClass("no translate") and I'm hoping that this adds the class before translate does its stuff.

[Narretz]

I'm not sure if this is solvable completely, either by GT or Angular. I don't see how GT is designed to translate dynamic websites. For me, it simply makes a static copy of a site where all translatable strings are translated.
For example, if you have a string like You have selected 1 image, GT would translate it. But if the user selects > 1, you'd have You have selected 2 images, and the translation would not update, wouldn't it?

That said, I believe your case where number bindings get destroyed can be fixed by using:
Bonus page in <span class="white" highlighter="data.bonus" ng-bind="{{data.bonus}}"></span>

Bonus page in <span class="white" highlighter="data.bonus" ng-bind="data.bonus"></span>

[wesleycho]

@Narretz I think you mean Bonus page in <span class="white" highlighter="data.bonus" ng-bind="data.bonus"></span>

[Narretz]

@wesleycho You are right, thanks!

[lgalfaso]

There is not a lot that can be done if the page is sliced and diced by an external tool. Closing this, as there is a workaround, and there is not a lot that can be done within angular

[KevinGuancheDarias]

For those that come from Angular >= 2, the solution proposed by @Narretz also work in high versions of Angular

Original:

<span>foo {{ name }}</span>

Working example:

<span class="notranslate">foo {{ name }}</span>

[KevinJ0]

For those that come from Angular >= 2, the solution proposed by @Narretz also work in high versions of Angular

Original:

<span>foo {{ name }}</span>

Working example:

<span class="notranslate">foo {{ name }}</span>

KevinGuancheDarias This works wonderfully!