0

我开始开发一个 Angularjs Web 应用程序，我在我的应用程序中使用了 angular-translate，当我有不同的视图时，我不知道使用 angular-translate 的最佳方式是什么。

我在我的应用程序上安装了 angular-translate-loader-static-files 并且我希望在单击更改当前视图的语言时在模板的标题上有一个语言按钮。视图在不同的控制器和我的 index.html 中分开：

<div ng-controller='HeaderController'>
<button ng-click="changeLanguage('pt')" translate="BUTTON_LANG_PT"></button>
      <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
</div>

我的翻译模块：

angular.module('elapApp.translate', ['pascalprecht.translate'])

.config(['$translateProvider', function($translateProvider) {
  // configures staticFilesLoader
  $translateProvider.useStaticFilesLoader({
    prefix: 'messages/locale-',
    suffix: '.json'
  });
  // load 'en' table on startup
  $translateProvider.preferredLanguage('pt');
}])
.controller('HeaderController', ['$translate', '$scope', function ($translate, $scope) {

  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
}]);

view.html 示例：

 <table class="table table-striped table-bordered">
            <thead>
                <th translate>AUTHOR_NAME</th>
                <th translate>AUTHOR_BIOGRAPHY</th>
                <th translate>AUTHOR_WEBSITE</th>
                <th translate>COMMON_ACTION</th>
            </thead>
            <tbody>
                <tr ng-repeat="data in authors">
                    <td>{{data.author_name}}</td>
                    <td>{{data.author_biography}}</td>
                    <td>{{data.author_website}}</td>
                    <td><a href="#/edit-author/{{data.author_id}}" class="btn">&nbsp;<i class="glyphicon glyphicon-edit"></i> Edit Author</a>
                    </td>
                </tr>
            </tbody>
        </table>

并查看模块：

angular.module('elapApp.authors', ['elapApp.services','ngRoute', 'elapApp.translate'])

.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.when('/', {
        title: 'Authors',
        templateUrl: 'partials/authors/authors.html',
        controller: 'AuthorsCtrl'
      }).when('/authors', {
            templateUrl: 'partials/authors/authors.html',
            controller: 'AuthorsCtrl'
        });
    }
])

.controller('AuthorsCtrl', ['$scope', 'Authors', function($scope, Authors) {
    Authors.getAuthors().then(function(data){
        $scope.authors = data.data;
    });

}]).run(['$location', '$rootScope',
    function($location, $rootScope) {
        $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
            $rootScope.title = current.$$route.title;
        });
    }
]);

因此，在这种情况下，当我单击语言按钮时，我的标题中的每个数据都会正确更改语言，但在我看来没有任何反应。在这种情况下，我该如何更改我的视图语言？

你能帮助我吗？

谢谢。一切顺利！

4

1 回答 1

0

我是 Angular 的新手，我没有看到你定义视图的位置，它在 HeaderController 的范围内吗？

我认为至少 HeaderController 应该涵盖 view.html，格式如下：

<div ng-controller='HeaderController'>
   <ng-view>
</div>
于 2014-09-16T05:47:16.787 回答