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