ui-routerで角度変換作業を行うにはどうすればよいですか？

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ファイルが取得されているのがわかりますが、適用されません。 私は何かを明らかに欠けていることを確信しているが、私はちょうどそれが何であるかを把握することはできません... ' AEと

が

Answer 1

ラップ変換パターン：

代わりに：

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

書き込み：

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

Demo