Wie angular-translate geladen wird, bevor eine UI mit UI-Router angezeigt wird.

Question

Ich habe angular-translate für i18n verwendet. Ich möchte $translatePartialLoader Service zu modularem Sprachenschlüssel als faulen Laden verwenden. Auch ich möchte dafür die ui-router Auflösungsoption verwenden.

Jetzt Wie geht das? Ist es möglich, ein Codebeispiel für mich hinzuzufügen?

Dank

Answer 1

I Lösungen finden und mein Problem lösen.

In config:

$translatePartialLoaderProvider.addPart('index'); 
     $translateProvider 
      .useSanitizeValueStrategy(null) 
      .fallbackLanguage('en-us') 
      .registerAvailableLanguageKeys(['en-us','pt-br'], { 
       'en_*': 'en-us', 
       'pt_*': 'pt-br' 
      }) 
      .useLoader('$translatePartialLoader', { 
       urlTemplate: '{part}/locale_{lang}.json' 
      }) 
      .useLoaderCache(true) 
      .useCookieStorage() 
      .determinePreferredLanguage(); 

In ui-router für Index:

.state('index', { 
    url: '/index', 
    templateUrl: 'index.html',     
    controller:'IndexCtrl', 
    resolve: { 
     trans:['RequireTranslations', 
      function (RequireTranslations) { 
       RequireTranslations('index'); 
      }], 
     dep: ['trans','$ocLazyLoad', 
      function(trans,$ocLazyLoad){ 
       return $ocLazyLoad.load(['plugin']).then(
        function(){ 
         return $ocLazyLoad.load(['IndexCtrl.js']); 
        } 
       ); 
      }] 
    } 
}) 
.state('index.users',{ 
    url: "/users", 
    templateUrl: "users.html", 
    controller:'UserListCtrl', 
    resolve: { 
     trans:['RequireTranslations', 
      function (RequireTranslations) { 
       RequireTranslations('modules/user'); 
      }], 
     dep: ['trans','$ocLazyLoad', 
      function(trans,$ocLazyLoad){ 
       return $ocLazyLoad.load(['UserListCtrl.js']) 
      }] 

    } 
}) 

und in run:

app.run(function($rootScope,$translate) { 

    // translate refresh is necessary to load translate table 
    $rootScope.$on('$translatePartialLoaderStructureChanged', function() { 
     $translate.refresh(); 
    }); 

    $rootScope.$on('$translateChangeEnd', function() { 
     // get current language 
     $rootScope.currentLanguage = $translate.use(); 
    }); 
}) 

und in RequireTranslations Werk:

app.factory('RequireTranslations', function($translatePartialLoader, $translate,$rootScope) { 
    return function() { 
     angular.forEach(arguments, function(translationKey) { 
      $translatePartialLoader.addPart(translationKey); 
     }); 
     return $translate.refresh().then(
      function(){ 
       return $translate.use($rootScope.currentLanguage); 
      } 
     ); 
    }; 
}); 

und bitte beachten Sie $translatePartialLoader und trans als Parameter in allen controllers wie folgt hinzufügen sollte:

app.controller('UserListCtrl',function($scope,...,$translatePartialLoader,trans){