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 pletely loaded.

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 pletely loaded.

• javascript
• angularjs
• internationalization
• translation

1 Answer 1

This is a mon issue when dealing with asynchronous execution. angular-translate now es 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