Question

我开始开发一个Angularjs网络应用程序，我在我的应用程序中使用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;
        });
    }
]);

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

你能帮助我吗？

感谢。一切顺利！

Answer 1

我是角色新手，我不知道你在哪里定义了视图，是否在HeaderController的范围内？

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

<div ng-controller='HeaderController'>
   <ng-view>
</div>

不同视图之间的角度转换

1 个答案: