2

ui-router 構成ファイルの routes.js で $translate.use() を使用しようとしているので、トグル言語を状態で切り替えることができますが、

キャッチされないエラー: [$injector:modulerr] 次の理由により、モジュール frontApp のインスタンス化に失敗しました: エラー: [$injector:unpr] 不明なプロバイダー: $translate

これが私のファイルです。

'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);
    }]);
}());

翻訳を含む translation.js ファイルもあります。上記の routes.js ファイルに $translate.use() を挿入して使用しない場合は、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'
  ]);

何が欠けていますか？お時間を割いてご協力いただき、誠にありがとうございました。

4

1 に答える 1

3

ここでの解決策は、「$translate」の 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 が必要です ... RUN フェーズで実行されるため...

また、構成フェーズと実行フェーズでのプロバイダーの詳細については、この Q & A を確認してください - Getting Error: Unkown provider: $urlMatcherFactory

于 2015-01-10T18:35:15.403 に答える