Votre navigateur n'est pas à jour !

Merci de mettre à jour votre navigateur pour utiliser mon blog. Mettre à jour mon navigateur maintenant

×

Angular - Traduction dans un contrôleur Angular 1.5.3

Date de publication 6 févr. 2017
Dans mon application j'utilise Angular Translate et j'avais besoin de lancer de la traduction dans un contrôleur. Cependant j'affichais les clés de traduction et non leurs valeurs. Il y avait donc un problème de chargement de traduction. En effet la méthode que je vais décrire est faite pour être asynchrone.

La solution est d'attendre la réponse du refresh() via une promesse then(). Refresh() met à jour les tables de traduction, il est utile quand on désire charger plusieurs fichiers de traduction via $translatePartialLoader
function MyCtrl ($translatePartialLoader, $translate) {
  var vm = this;
  $translatePartialLoader.addPart('../components/mycomponent');
  $translate.refresh().then( 
    ...
    vm.month = $translate.instant('SEARCH_MONTH')
  );
  ...
});

Et dans le fichier run.js on configure notre module de traduction
angular
    .module('app', ['pascalprecht.translate'])
    .config(function ($stateProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
      $urlRouterProvider.otherwise("/");

      $stateProvider
          .state('home', {
            url: '/home',
            templateUrl: 'views/home.html',
            controller: 'MainCtrl',
            controllerAs: 'home'
          });

      $translatePartialLoaderProvider.addPart('common');
      $translateProvider.useLoader('$translatePartialLoader', {
          urlTemplate: 'i18n/{part}/locale-{lang}.json'
      });
      $translateProvider.preferredLanguage('en');
    });

})();
blog comments powered by Disqus