Traduction dans un contrôleur Angular 1.5.3

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

Copier le code
1
2
3
4
5
6
7
8
9
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

Copier le code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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');
    });

})();