web-dev-qa-db-fra.com

AngularJS: Définition des langues en traduction angulaire à partir du contrôleur ou du service

Je suis intéressé à utiliser angular-translate.

En raison de nombreux appels d'installation qui se produisent initialement au démarrage, je ne peux pas fournir le langage json lors de la configuration. Il n'est pas non plus possible d'utiliser le chargeur asynchrone . Je dois pouvoir spécifier les langues à partir d'un contrôleur ou d'un service ultérieurement.

$translateProvider.translations(.., ...) est l'appel à utiliser, mais $translateProvider n'est pas disponible dans les contrôleurs ou les services, mais apparemment uniquement à la config.

$translate ne semble pas avoir la capacité de charger un langage JSON.

Y a-t-il une solution de contournement?

angularjsangular-translate
9
Joel Basson

Je suis arrivé à la fin.

dans le .config

$translateProvider.useLoader('customLoader');

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

});

puis un service de traduction pour partager les données

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

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

        getLanguages: function (data) {
            return languages;
        }
    }
});
3
Joel Basson

Commencez par injecter $translate dans votre contrôleur.

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

Ensuite, vous pouvez obtenir et définir la langue actuelle avec $translate.use().

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

Si vous devez ajouter de nouvelles traductions après la configuration, vous pouvez utiliser des chargeurs partiels.

// 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 cela n’est pas assez dynamique, 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>

Cela cracherait quelque chose comme

enter image description here

19
Mikko Viitala

celui-ci fonctionne. storageService a un stockage local et après avoir défini '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>
1
Taner

Peut-être vérifier ceci: 

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

Sous "Changer de langue à 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);
  };
});
1
Konstantin Krass

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

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