AngularJS: Définition des langues dans angular-translate à partir du contrôleur ou du service

Je m'intéresse à l'aide d'angular-translate.

Raison de la configuration des appels qui arrivent d'abord sur le démarrage, je ne peux fournir de la langue json au cours de config. Ni est-il possible d'utiliser la async chargeur.
J'ai besoin d'être en mesure de spécifier les langues à partir d'un contrôleur ou d'un service à un moment plus tard.

$translateProvider.translations(.., ...) est l'appel à utiliser, mais $translateProvider n'est pas disponible dans les contrôleurs ou des services, mais en apparence seulement à config.

$translate ne semble pas avoir la capacité de charge d'un langage JSON.

Est-il une solution de contournement?

source d'informationauteur Joel Basson

  1. 19

    Première injecter $translate dans votre contrôleur.

    app.controller('MainCtrl', function($scope, $state, $translate) {});

    Ensuite, vous pouvez obtenir et de définir langage courant avec $translate.use().

    var lang = $translate.use(); //holds current lang
$translate.use(lang);  //sets lang to use

     

    Si vous devez ajouter de nouvelles traductions d'après la config, alors vous pouvez utiliser partiellement les chargeurs.

    //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", ... }

     

    Si ce n'est pas assez dynamique, alors vous pouvez toujours faire la traduction à la volée.

    //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>

    Ce serait cracher quelque chose comme

    AngularJS: Définition des langues dans angular-translate à partir du contrôleur ou du service

  2. 3

    Y est arrivé.

    dans le .config

    $translateProvider.useLoader('customLoader');

    la 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;
    };

});

    et puis un TranslationService de partager les données

    angular.module('myapp').factory('TranslationService', function () {
    var languages = [];

    return {
        setLanguages: function (data) {
            languages = data;
        },

        getLanguages: function (data) {
            return languages;
        }
    }
});
  3. 1

    Peut-être vérifier ce:

    http://www.ng-newsletter.com/posts/angular-translate.html

    Sous "changement de la langue au moment de l'exécution"

    $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);
  };
});
  4. 1

    celui-ci fonctionne. storageService dispose de locaux de stockage et d'après la définition de 'NG_TRANSLATE_LANG_KEY' dans le stockage local. Vous pouvez l'appeler comme ci-dessous.

    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>
  5. 0

    Je pense que la meilleure façon de gérer le chargement dynamique est
    dans le résoudre config routeur bloc comme

    resolve: {
    translatePartialLoader:  function loadPartialLoader($translate,$translatePartialLoader) {
        $translatePartialLoader.addPart('home');
        return $translate.refresh();
    }
}