3

我正在使用 AngularJS 翻译，如果我按照 pascalprecht 中的教程使用它，我的角度应用程序失败并且它不显示任何内容（它不加载部分视图），所以我决定使用 angular-translate-partial-装载机

我有一个应用程序菜单，我有一个 MenuCtrl 来显示选项，我想翻译这个菜单

这是我的代码

 angular.module('myapp'['ngAnimate','ngAria','ngCookies','ngMessages','ngResource','ngRoute','ngSanitize', 'ngTouch', 'pascalprecht.translate'])
.value('language', 'bra')
.run(function ($rootScope, $translate) 
{
  $rootScope.$on('$translatePartialLoaderStructureChanged', function () 
        {
          $translate.refresh();
        }
    );
})
.config(function($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
  urlTemplate: 'translations/{lang}/{part}.json'
});
$translateProvider.preferredLanguage("bra");
})
.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
});

angular.module('myapp')
.controller('MenuCtrl', function ($scope, $translatePartialLoader) {

       $translatePartialLoader.addPart('menu');

        $scope.lItems = [
                    {
                        title: "HOME",
                        class:'active',
                        href:'/',
                        visible: true
                    },
                    {
                        title: "CLASSROOMS",
                        class:'',
                        href:'#',
                        visible: true
                    },    
                    {
                        title: "EXPENSES",
                        class:'',
                        href:'#',
                        visible: true
                    },
                    {
                        title: "EARNINGS",
                        class:'',
                        href:'#',
                        visible: true
                    },
                    {
                        title: "STUDENTS",
                        class:'',
                        href:'#',
                        visible: true
                    }
                ];


 });

在 index.html 中

            <div id="navbar" class="navbar-collapse collapse" ng-controller="MenuCtrl">
                <ul class="nav navbar-nav" ng-repeat="lItem in lItems">
                    <li class="{{lItem.class}}"><a href="{{lItem.href}}">{{lItem.title |   translate}}</a></li>
                </ul>
            </div>

你能帮助我吗？

谢谢！

4

1 回答 1

5

最后我找到了解决方案。

问题是菜单超出了 ng-view 块，并且当应用程序加载时没有刷新正确的 html 部分。

通过添加这个 $translatePartialLoaderProvider.addPart('menu');

 .config(function ($translateProvider, $translatePartialLoaderProvider) {

    $translatePartialLoaderProvider.addPart('menu');   

    $translateProvider.useLoader('$translatePartialLoader', {
     urlTemplate: 'translations/{lang}/{part}.json'
   });
   $translateProvider.preferredLanguage('bra');

……

当应用程序加载时，菜单部分也被加载。

于 2015-01-14T13:28:31.233 回答