Question

我需要将旧的1.5.6角度应用程序本地化。我用ui-router。它不起作用。我试图找到原因，但似乎其他人对进一步的步骤有疑问，而我却被困在第一个......

以下是我的应用的简化代码：

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

如何使用ui-router进行角度转换？

1 个答案: