如何让 angular translate 与 ui-router 一起工作？

Question

我需要将我的旧 angular 1.5.6 应用程序本地化。我使用 ui-路由器。它不起作用。我试图找到原因，但似乎其他人对进一步的步骤有疑问，而我却停留在第一个步骤上...

这是我的应用程序的简化代码：

angular
    .module('localeApp', [
      'ngCookies',
      'ui.router',
      'pascalprecht.translate'
    ])
    .config(
      ['$stateProvider','$urlRouterProvider', '$translateProvider',
      function($stateProvider,$urlRouterProvider, $translateProvider) {
        $urlRouterProvider.otherwise('/login');
        $stateProvider
          .state('login', {
            url: '/login',
            templateUrl: 'loginTpl.html'
          })
          .state('welcome', {
            url: '/welcome',
            templateUrl: 'welcomeTpl.html'
          })
          .state('other', {
            url: '/other',
            templateUrl: 'otherTpl.html'
          });

        $translateProvider.useMissingTranslationHandlerLog();// log missing translations
        $translateProvider.useStaticFilesLoader({
            prefix: 'locale-',// path to translations files
            suffix: '.json'// suffix, currently- extension of the translations
        });
        $translateProvider.preferredLanguage('en_US');// is applied on first load
        $translateProvider.useLocalStorage();// saves selected language to localStorage


    }])
    .run(['$rootScope', '$translate', function($rootScope, $translate) {
      $rootScope.$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){
                $translate.refresh();
            });
    }]);

为每个语言环境定义了 json 个文件。例如默认的 locale-en_US.json:

{
  "translate.welcome": "welcome",
  "translate.login": "login",
  "translate.other": "other"
}

和模板 loginTpl.html 页面：

<p>This is {{translate.login | translate}} page</p>

一切尽在this plunker。

我可以看到 json 文件已检索，但未应用。我确定我遗漏了一些明显的东西，但我就是想不通它是什么...

Answer 1

用'a.e包裹翻译模式。:

改为：

<p>This is {{translate.login | translate}} page</p>

写：

<p>This is {{'translate.login' | translate}} page</p>

Demo

如何让 angular translate 与 ui-router 一起工作？

How can I make angular translate work with ui-router?

angularjs

angular-ui-router

angular-translate