Angular Translate not translating sometimes with one-time binding

Question

I am using Angular 1.x and it's Angular Translate module. Recently, I switched all my translation bindings from two-way to one-time. Everything worked fine, until one day, however, I noticed that sometimes if I started refreshing the page, the translations are not actually getting translated.

Example:

{{ ::'MyTranslationKey' | translate }}

In 90% of the times the result is correct. In the other 10%, however, the rendered result is:

MyTranslationKey

What's the reason for this and how can I fix it?

Edit:

This doesn't happen to elements that are inside ng-if, ng-repeat or directives - e.g. when they are inside a child scope.

Are you sure you have a translation to this string (`MyTranslationKey`)? Have you tried it WITHOUT one-time binding? — Alon Eitan, Mar 31 '17 at 08:49
@AlonEitan - yes, of course the issue comes from the one-time binding, but that's why I posted the question this way. — Yulian, Mar 31 '17 at 11:02

score 5 · Accepted Answer · answered Mar 31 '17 at 08:57

5

By default, angular-translate puts an empty string for the keys without translation. The reason why in 10% of the times translate doesn't work is that you have received files with translations just after the page was rendered. When you received the translation files, new values for translate directive did not apply, because of one time data binding; In this case, you can put all content inside ng-if with data receiving condition, ng-if='loaded'.

answered Mar 31 '17 at 08:57

Andrii Komarnitskyi

110
4

How do I check when the file is loaded - on $translateChangeSuccess? – Yulian Mar 31 '17 at 10:49
You should not use one-time data bindings if you use staticFilesLoader or any other asynchronous calls for loading translations. [see issue](https://github.com/angular-translate/angular-translate/issues/967) – Andrii Komarnitskyi Mar 31 '17 at 22:03
Try to make your own async call for the translation data, after the promise will be resolved, do `$translateProvider.translations(locale, translationData);` and show the page after that. Or simply load translation synchronous. – Andrii Komarnitskyi Mar 31 '17 at 22:18

Jeffrey Roosendaal · Answer 2 · 2017-03-31T09:18:40.447

3

Try:

<element translate>
    {{::'MyTranslationKey'}}
</element>

Also, using the translate attribute instead of the filter gives you better performance (according to Pascal Precht, the creator of Angular Translate).

edited Mar 31 '17 at 09:18

answered Mar 31 '17 at 09:09

Jeffrey Roosendaal

5,961
8
33
50

Hey man, thanks - your solution also works, but it will take me some time to implement it as I have thousands of such bindings along my website. And as my bug is on production, I need a quick fix as Andrii's one. Cheers :) – Yulian Mar 31 '17 at 11:30
By the way, I tried to experiment with this and it seems like it's not adding anything to performance, because every translate directive seems to add another watcher - which I avoided with using one-time binding on the translations keys. So filters seem to be better than directives. – Yulian Mar 31 '17 at 11:52
Just FYI...angular-translate is a stateful filter and thats the reason why its not good in terms of performance. – Anirudh Mangalvedhekar Apr 05 '17 at 00:00

Angular Translate not translating sometimes with one-time binding

2 Answers2