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.

Answer 1

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'.

Answer 2

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).