possible to add translations dynamically in controller ?

[chachou29]

Hello,
I need to add dynamically translations from JSON object (not file, not URL) from an angular controller.
Any idea ?
Thank you.
Philippe

[DWand]

Hello, @chachou29.
I think you can do this by creating a custom loader and calling the refresh method.

[chachou29]

Thanks a lot for this quick answer, but please could you be more specific ?

[DWand]

There are two ways to feed translations to the angular-translate:

1. Use the $translateProvider.translations() method
2. Use an asynchronous loader

Providers could be normally used during the configuration phase only. You can save the reference to the $translateProvider somewhere and use it to add translations in runtime. But it is kinda dirty and hacky.

Also you are able to create your own asynchronous loader. A loader is a regular angular service which could be used by angular-translate to retrieve translation tables for needed languages. The only requirement to this service is to implement interface of the loader. And it doesn't even matter whether it performs XHR requests or not.
You can find more information about custom loaders here:
http://angular-translate.github.io/docs/#/guide/13_custom-loaders.
Also you can use any of the standard loaders as an example:
https://github.com/angular-translate/angular-translate/blob/master/src/service/loader-url.js
https://github.com/angular-translate/angular-translate/blob/master/src/service/loader-static-files.js
https://github.com/angular-translate/angular-translate/blob/master/src/service/loader-partial.js

So, following either of these ways you are able to provide translations to angular-translate in runtime. The only problem might be to ask angular-translate to use these translations. I'm not able to say anything about the first approach because I haven't tried it. But going the second way you can call the $translate.refresh() method. This will force angular-translate to forget all "current" translation tables and ask the loader for new ones.

[djmccormick]

Thanks, @DWand. I tried your first method and it works like a charm. I'd love to see support for this baked into angular-translate some day.

[knalli]

Doing exactly what more than method 1?

[knalli]

Closing due inactivity.

[sajit]

@DWand In my use case I dont know the URL of the XHR request needed to load up translations beforehand. Hence I need to update the translations after I get the data back. Is there a way to do this? Other than have a global translationsProvider object and call the translations method of that?

[DWand]

Hi, @sajit. I'm overloaded with work now and don't have an ability to contribute to open source projects. Due to this reason I didn't work with a code base of angular-translate for quite a big amount of time. So, my answer might be completely wrong and it might be more appropriate to ask @knalli or @tspaeth about this.

As far as I remember, you can still create a custom loader. Such loader is just a regular AngularJS service. So you are able to do pretty much anything there, including XHR requests, response mocking, events triggering, etc. I believe, that you can set a correct URL for your custom loader in runtime and than refresh angular-translate's translations. For more information you can see this comment #930 (comment) and official documentation of this module.

[leolux]

@DWand Translations can be added with $translateProvider.translations(). Is it possible to overwrite the value of an existing translation outside the configuration phase (within a controller) as well?

[guyzk]

@leolux
Using the hacky suggestion provided by DWand it is possible.
You can do this by using angular $provide in your app's config method in following way:
$provide.value('$translateProvider', $translateProvider);
Then in your controller you can set the key using the regular provider function as follows:
$translateProvider.translations(langKey, {key: value});

This worked out for me...