How to fix angular-translate showing translation key on webpage on load?

Question

I am using angular-translate for i8n in my project. I am using ansynchronous url-loader to load my translation tables.

$translate.useUrlLoader(myUrl)

The translate directives and filters both return the key which I am translating until the translation tables are loaded.

<a ng-bind="translation.key | translate"></a>
<a translate="translation.key></a>

Both the above display 'translation.key' on the webpage until the translation tables are loaded.

NOTE: I have reasons to not listen on $translationChangeSuccess event.

---

I am looking for either of the two solutions

• Synchronously load translation tables from URL.
• Don't show translated text until translation tables are completely loaded.

Answer 1

This is a common issue when dealing with asynchronous execution. angular-translate now comes with a translate-cloak directive that helps you out preventing FOUCs. You can read about it here: http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading#asynchronous-loading_fouc---flash-of-untranslated-content