在ui-router配置文件中使用angular-translate的$ translate.use（）

Question

我試圖在我的ui-router配置文件routes.js中使用$ translate.use（），這樣我就可以切換切換語言狀態，但我得到一個

未捕獲的錯誤：[$注射器：modulerr]未能實例化模塊frontApp由於： 錯誤：[$注射器：unpr]未知提供商：$翻譯

這裏是我的文件。

'use strict'; 

(function() { 
    angular.module('frontApp') 
     .run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { 
      $rootScope.$state = $state; 
      $rootScope.$stateParams = $stateParams; 
     }] 
    ) 
    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$translate', function($urlRouterProvider, $stateProvider, $locationProvider, $translate){ 
     $urlRouterProvider 
      .otherwise('/'); 
     $stateProvider 
      .state('home', { 
       url: '/', 
       templateUrl: '/views/home.html', 
       controller: 'HomeCtrl' 
      }) 
      .state('home.rules', { 
       url: '^/rules', 
       templateUrl: '/views/rules.html' 
      }) 
      .state('home.terms', { 
       url: '^/terms', 
       templateUrl: '/views/terms.html' 
      }) 
      .state('home.faq', { 
       url: '^/faq', 
       templateUrl: '/views/faq.html' 
      }) 
      .state('language', { 
       controller: function() { 
        console.log('ok'); 
        $translate.use(($translate.use() === 'fr') ? 'en' : 'fr'); 
       } 
      }); 
     $locationProvider.html5Mode(true); 
    }]); 
}()); 

我也有包含我的翻譯，當不試圖注入和使用$ translate.use（）在上面routes.js一個translation.js文件文件我用它使用TranslateController沒有問題：

'use strict'; 

(function() { 
    angular.module('frontApp') 
     .config(['$translateProvider', function($translateProvider) { 
      $translateProvider 
       .translations('fr', { 
        language: 'English', 
        otherLanguage: 'en', 
        cssClass: 'french', 
        linkHome: 'Accueil', 
        linkRules: 'Règlement', 
        linkTerms: 'Termes et conditions', 
        linkFAQ: 'FAQ', 
       }) 
       .translations('en', { 
        language: 'Français', 
        otherLanguage: 'fr', 
        cssClass: 'english', 
        linkHome: 'Home', 
        linkRules: 'Rules', 
        linkTerms: 'Terms and conditions', 
        linkFAQ: 'FAQ', 
       }); 
      $translateProvider.preferredLanguage('fr'); 
     }]) 
     .controller('TranslateController', ['$translate', '$scope', '$location', function ($translate, $scope, $location) { 
      // The URLs need to be updated 
      var host = $location.host(); 
      if (host === 'localhost' || host === '0.0.0.0') { 
       $translate.use('fr'); 
      } 
      else if (host === 'localhost-en') { 
       $translate.use('en'); 
      } 
      $scope.switchLanguage = function() { 
       $translate.use(($translate.use() === 'fr') ? 'en' : 'fr'); 
      }; 
     }]); 
}()); 

這裏是app.js：

'use strict'; 

angular 
    .module('frontApp', [ 
    'ui.router', 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngTouch', 
    'pascalprecht.translate' 
    ]); 

我缺少什麼？非常感謝您的時間和幫助。這裏

Answer 1

解決方案將是移動的「$翻譯」的DI定義 - 它屬於的地方，即到controller定義：

.state('language', { 
// instead of this 
// controller: function() { 

// use this 
controller: function($translate) { 

     console.log('ok'); 
     $translate.use(($translate.use() === 'fr') ? 'en' : 'fr'); 
    } 
}); 

甚至更​​好controller: ['$translate', function($translate) {... }]

爲什麼是當前解決方案不是可以使用？好吧，讓我們來看看這種提取物從上面的代碼：

// I. CONFIG phase 
.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$translate' 
     , function($urlRouterProvider, $stateProvider, $locationProvider, $translate){ 
    ... 
    $stateProvider 
     ... 
     .state('language', { 
      // II. CONTROLLER - RUN phase 
      controller: function() { 

正如我們所看到的，我們在配置階段要求$translate以上。所以我們接收提供商...進行配置。

但控制器定義期望提供服務 - 已配置。它必須有自己的DI ...因爲它會在運行階段執行...

還要檢查這個問答&一個有關供應商的詳細信息在配置VS運行階段 - Getting Error: Unkown provider: $urlMatcherFactory