Strings not translated with $translate() service

[Roger Villars]

Hi.

I have a bit of a strange problem. 

I'm loading my translations asynchronously from an URL. Because of technical reasons, I had to disable the caching for these requests. 

It now happens sometimes, that strings translated in a script with the $translate() service don't get translated. It's not just a FOUC effect, the strings stay untranslated until I refresh the page (or change the language).

This is only the case for $translate() handled strings and only for certain page loading constellations. For me it seems the more time it needs load the translations from the server, the more this happens. 

Testing the application locally it only happens in about one of 100 requests. Testing the application over the internet with a slow connection it happens almost all the time making the asynchronous loading mechanism almost unusable. Strings translated with filters or directives don't have the problem.

Any ideas/hints what might cause this?  

[Pascal Precht]

Hey Roger!

Yea this is a pretty logical behaviour. Just as you said, the more time it needs to load the data asynchronously, the often it happens that `$translate` service returns an unstranslated string.

The reason for that is, that the needed translation data simply is not available yet. So what happens is, the following: `$translate` service gets a translation id via `$translate('TRANSLATION_ID')`,

then it checks if there's a translation table for the requested language and also if the given translation id does exist in it. If it's not the case, it tries the same with the configured fallback language.

If even the translation id is not present in the translation table for the fallback language, a missingTranslationHander gets invoked (if configured). After that it just returns the translation id.

So how to get around this? Since things are flowing asynchronously you'll never know when translation data is available. Which means, simply relying on `$translate` service isn't enough.

You either have to wait for `$translateChangeSuccess` event and use `$translate` service then, or, if possible, you try to extract the translation logic to the view layer and use directives or

filters. They take care about that event listening.

If you decide to wait for `$translateChangeSuccess` event, you can do it like this:

```js

$rootScope.$on('$translateChangeSuccess', function () {

    $scope.foo = $translate('TRANSLATION_ID');

});

```

You can find more about events here: http://pascalprecht.github.io/angular-translate/docs/en/#/guide/16_events

Hope this helps!

[Roger Villars]

Ahaa! Yes that actually explains a lot! Thx!

I thought that the $translate() service already has some build in callback mechanism for the asynchronous calls like the filters and directives have. Now that I read the "events" part of your (very understandable!) documentation I see that everything is explained there very well.

Perhaps you would like to give a little hint about that in the "$translate service" chapter for people like me that tend to naively start using a framework before fully reading the docu ;-).

Thx again and keep up the good work on angular-translate!

[Pascal Precht]

Great! Glad that it makes things clear! I'll update the docs accordingly, thanks for you feedback! :)