Ошибка типа: $ translate.use не является функцией

Question

Ошибка типа: $ translate.use не является функцией

0

Поэтому я сначала добавил языки en, fr & nl в файл app.js. Это ужасная плохая практика, поэтому теперь я получил переводы из файла app.js и вставил их в форматированные файлы JSON.

Однако, когда я загружаю сайт сейчас, в моем контроллере метод changeLanguage вызывает TypeError: $ translate.use не является функцией. Кто-нибудь видит мою ошибку?

(ПЕРВЫЙ КОД)

app.js:

    var app = angular.module('eva', ['ui.router', 'ngMaterial', 'ngMessages',
      'controllers', 'factories', 'ngAnimate', '720kb.socialshare',
      'angular-loading-bar', 'angular-svg-round-progress', 'pascalprecht.translate', 'ngSanitize',
      'facebook']);

app.config(function ($translateProvider) {
    $translateProvider.useSanitizeValueStrategy('sanitize');

    $translateProvider.useStaticFilesLoader({
        prefix: '../languages/',
        suffix: '.json'
    });

    $translateProvider.registerAvailableLanguageKeys(['en', 'nl', 'fr'], {
        'en': 'en',
        'nl': 'nl',
        'fr': 'fr'
    });

    $translateProvider.preferredLanguage('nl');
});

index.html:

<body layout="column" ng-controller="AppCtrl" layout-fill>
        <div id="fb-root"></div>

        <!--<vid-bg resources="resources" class="video" poster="poster" full-screen="fullScreen" muted="muted" z-index="zIndex" play-info="playInfo" pause-play="pausePlay"></vid-bg>-->

        <!-- ANGULAR MATERIAL LOADING -->
        <md-toolbar layout="row" md-scroll-shrink ng-if="true">
            <div class="md-toolbar-tools ng-scope" ng-controller="NavCtrl as demo">
                <md-button ng-click="toggleSidenav('left')"  class="md-icon-button" ng-show="isLoggedIn()" aria-haspopup="true" aria-expanded="true"
                        aria-label="sidebar menu">
                    <md-icon aria-label="Menu" md-svg-icon="./js/lib/material-design-icons/navigation/svg/design/ic_menu_24px.svg"></md-icon>
                    <md-tooltip md-direction="bottom">{{ 'MENU' | translate }}</md-tooltip>
                </md-button>

                <span>
                    <md-button md-no-ink href="#/index" aria-label="logo">
                        <img src="js/lib/images/logo/48x48.png" alt="logo" >
                    </md-button>
                </span>

                <!-- fill up the space between left and right area -->
                <span flex></span>

                <md-fab-speed-dial md-direction="left" ng-class="demo.selectedMode">
                    <md-fab-trigger>
                        <md-button aria-label="menu" class="md-fab md-warn">
                            <md-tooltip md-direction="bottom">Menu</md-tooltip>
                            <md-icon aria-label="Menu" md-svg-icon="./js/lib/material-design-icons/action/svg/design/ic_language_24px.svg"></md-icon>
                        </md-button>
                    </md-fab-trigger>

                    <md-fab-actions>
                        <md-button aria-label="dutch" class="md-fab md-raised md-mini" ng-click="changeLanguage('nl')">
                            <md-tooltip md-direction="bottom">Dutch</md-tooltip>
              <p>nl</p>
                        </md-button>
                        <md-button aria-label="english" class="md-fab md-raised md-mini" ng-click="changeLanguage('en')">
                            <md-tooltip md-direction="bottom">English</md-tooltip>
              <p>en</p>
                        </md-button>
                        <md-button aria-label="french" class="md-fab md-raised md-mini" ng-click="changeLanguage('fr')">
                            <md-tooltip md-direction="bottom">French</md-tooltip>
              <p>fr</p>
                    </md-button>
                </md-fab-actions>
            </md-fab-speed-dial>
        </div>
    </md-toolbar>

AppController:

angular.module('controllers')
.controller('AppCtrl', ['$scope', '$mdSidenav',
 '$mdToast','$translate', 'auth', 'Facebook','$state', function($scope, $mdSidenav, $translate, auth, Facebook,$state){

    /* sidenav togglen */  
        $scope.toggleSidenav = function(menuId) {
            $mdSidenav(menuId).toggle();
        };

      /* taal veranderen */
        $scope.changeLanguage = function(langKey){
            $translate.use(langKey);
            $state.reload();
        };

ОШИБКА происходит в $ translate.use(langKey); строка кода выше.

Здесь вы можете увидеть мою структуру файлов JSON: http://imgur.com/xNo2MxX.

И это пример моего языкового файла JSON: http://imgur.com/9TB8FX1.

Вот как выглядит сайт: http://imgur.com/pEyo1YN.

Если есть) или; или аналогичные пропущенные в конце кода "фрагменты", потому что я копирую только те части страницы, части, которые имеют значение, поэтому не волнуйтесь, они все там.

Кто-нибудь может увидеть причину ошибки?

Tempuslight 26 нояб. 2015, в 22:55

Источник

Теги:

javascript

angularjs

json

internationalization

angular-translate