AngularJS : Setting languages in angular-translate from Controller or Service - angularjs

Question

I am interested in using angular-translate.
Due to a lot of setup calls that happen initially on startup, I cannot provide the language json during config. Nor is it possible to use the async loader.
I need to be able to specify the languages from a controller or service at a later point.
$translateProvider.translations(.., ...) is the call to use, but $translateProvider isn't available in controllers or services, but seemingly only at config.
$translate doesn't seem to have the ability to load a language JSON.
Is there any workaround?

Answer 1

First inject $translate into your controller.
app.controller('MainCtrl', function($scope, $state, $translate) {});
Then you can get and set current language with $translate.use().
var lang = $translate.use(); // holds current lang
$translate.use(lang); // sets lang to use
If you need to add new translations after config, then you can use partial loaders.
// config example
app.config(function($translateProvider, $translatePartialLoaderProvider){
// "known" translations here, in {lang}.main.json, if any
$translatePartialLoaderProvider.addPart('main');
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: '/path/to/files/{lang}.{part}.json'
});
});
// controller
app.controller('MainCtrl', function($scope, $translate, $translatePartialLoader){
$translatePartialLoader.addPart('translation');
$translate.refresh();
$translate.use('en');
});
// en.translation.json
{ "KEY" : "Value", ... }
If that is not dynamic enough, then you can always do the translation on-the-fly.
// config
app.config(function($translateProvider, $translatePartialLoaderProvider){
$translateProvider.preferredLanguage('en');
$translateProvider.translations('en',{
'TITLE': '{{ title }}',
'SUBTITLE': '{{ subtitle }}',
'STATIC': 'This is static'
});
});
// controller
app.controller('MainCtrl', function($scope, $translate){
$scope.dynamic = {
'title': 'This is my header',
'subtitle': 'My subtitle'
};
});
// template
<pre>{{ 'TITLE' | translate:dynamic }}</pre>
<pre>{{ 'SUBTITLE' | translate:dynamic }}</pre>
<pre>{{ 'STATIC' | translate }}</pre>
This would spit out something like

Answer 2

Got there in the end.
in the .config
$translateProvider.useLoader('customLoader');
the customLoader...
angular.module('myapp').factory('customLoader', function ($q, TranslationService) {
return function (options) {
var deferred = $q.defer();
deferred.resolve(TranslationService.getLanguages().filter(function(lang){
return lang.key == options.key
})[0].values);
return deferred.promise;
};
});
and then a TranslationService to share the data
angular.module('myapp').factory('TranslationService', function () {
var languages = [];
return {
setLanguages: function (data) {
languages = data;
},
getLanguages: function () {
return languages;
}
}
});

Answer 3

Maybe check this:
http://www.ng-newsletter.com/posts/angular-translate.html
Under "Switching the language at runtime"
$translate.use(); // Returns the currently used language key
$translate.use('en'); // Sets the active language to `en`
app.controller('TranslateController', function($translate, $scope) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});

Answer 4

this one works. storageService has local storage and after setting 'NG_TRANSLATE_LANG_KEY' in local storage. You can call it like below.
angular.module('myApp').run(['$rootScope', 'StorageService', function($rootScope, StorageService) {
$rootScope.currentLanguage = StorageService.local.get('NG_TRANSLATE_LANG_KEY') || 'en';
}]);
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="TranslateController" ng-init="changeLanguage(currentLanguage)">
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" ng-click="changeLanguage('tr')">TR</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" ng-click="changeLanguage('en')">EN</a></li>
</ul>

Answer 5

I think the best way to manage dynamically loading is
in the resolve config router block like
resolve: {
translatePartialLoader: function loadPartialLoader($translate,$translatePartialLoader) {
$translatePartialLoader.addPart('home');
return $translate.refresh();
}
}