2017-08-24 120 views
1

我需要使舊的角度1.5.6應用程序本地化。我使用ui-router。它不起作用。我試圖找到原因,但似乎其他人有關於進一步措施的問題,而我卡在第一個...如何使用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文件被檢索到,但沒有被應用。 我敢肯定,我失去了一些東西很明顯,但我只是無法弄清楚它是什麼......

+1

也使用'$ translateProvider.useSanitizeValueStrategy('escape');'在這裏閱讀更多https://angular-translate.github.io/docs/#/guide/19_security – abhig10

+0

對,謝謝@ abhig10指出這一點。我在控制檯中看到了警告消息,我想在將來的某個時候解決它,但是現在您可以使用您的代碼段進行操作。 – george007

回答

1

' AE裹翻譯模式:

相反:

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

寫:

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

Demo

+0

Doh!我知道**這是我錯過的一些細節。謝謝你,小夥伴。 – george007