Question

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

我有一个应用程序菜单，我有一个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>

你能帮助我吗？

谢谢！

Answer 1

最后我找到了解决方案。

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

添加此$ translatePartialLoaderProvider.addPart（＆＃39; menu＆＃39;）;

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

    $translatePartialLoaderProvider.addPart('menu');   

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

...

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

Angular-Translate部分加载器无法正常工作

1 个答案: