TypeError:$ translate.use不是函数

时间:2015-11-26 21:37:33

标签: javascript angularjs json internationalization angular-translate

所以我首先添加了语言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

如果有的话)或;或者类似的代码在代码“片段”末尾丢失了,因为我只复制粘贴了一部分页面,重要的部分不要担心它们都在那里。

任何人都可以看到导致错误的原因?

1 个答案:

答案 0 :(得分:0)

修正了,在我的模块中,我忘记了$ mdToast ......他们必须以相同的顺序加载所有内容。