0

我想實現的目標

在我們的angularjs中,我們使用angular-ui-bootstrap作爲我們的datepickers。我們希望我們的datepickers能夠在用戶的語言環境中本地化,但我們不能動態地做到這一點,因爲沒有這樣的API。用戶的語言環境是從後端檢索的,所以我需要在呈現主狀態之前更改角度的語言環境。我的解決方案是調用一個服務,它會在我們的應用程序中注入正確的語言環境文件。

代碼

的injectorService:

;(function(module) { 
'use strict'; 

function injector($q) { 
    var body = document.getElementsByTagName('body')[0]; 
    return { 
     addScript: function(url, async, cb) { 
     return $q(function(resolve, reject) { 
      var script = document.createElement('script'); 
      var loaded; 
      script.type = 'text/javascript'; 
      script.setAttribute('src', url); 
      script.onreadystatechange = script.onload = function() { 
       if (!loaded) { 
       if(cb && _.isFunction(cb)){ 
        cb(null, 'ok'); 
       } else { 
        return resolve('ok'); 
       } 
       } 
       loaded = true; 
       resolve('loaded'); 
      }; 
      script.onerror = function(error) { 
       if(!error.isTrusted){ 
        if(cb && _.isFunction(cb)){ 
         cb(error, null); 
        } else { 
         reject(error); 
        } 
       } 
      }; 
      body.appendChild(script); 
     }); 
    } 
    }; 
} 

module.factory('Injector', injector); 

}(angular.module('injector', []))); 

在我打電話的決心節

  resolve: { 
        env : function(userService, Injector) { 
         return userService.getLocale() 
          .then(function(env) { 
           var userEnv = env; 
           var baseUrl = '/app/'; 
           var angularSpecificLocale = ''; 

           switch(userEnv.userlocale){ 
            case 'fr': 
            angularSpecificLocale = baseUrl + 'fr.js'; 
            break; 
           case 'ro': 
            angularSpecificLocale = baseUrl + 'ro.js'; 
            break; 
           default: 
            angularSpecificLocale = 'en'; 
            break; 
           } 
           // Don't add any locale files 
           if(angularSpecificLocale === 'en'){ 
            return userEnv; 
           } else { 
            return Injector.addScript(angularSpecificLocale) 
            .then(function() { 
             return userEnv; 
            }); 
           } 
          }); 
        } 
       } 

下面的代碼的問題

主狀態的開始問題是datepicker仍然沒有本地化。我想我錯過了這裏的最後一步,因爲當我在代碼中添加此片段時

angular.injector(['ngLocale']).get('$locale') 

我看到區域設置ID是正確的。我希望得到一些幫助,而無需使用任何外部庫

謝謝:)

回答

0

我使用angularDeferredBootstrap模塊用於這一目的:

deferredBootstrapper.bootstrap({ 
    element: document.body, 
    module: 'frontApp', 
    resolve: { 
     userLang: ['$http', function ($http) { 
      return $http.get('/api/userLanguage'); 
     }] 
    } 
}); 

然後你可以注入,並在應用程序中使用

隨時隨地 userLang
+0

Thanx的答覆!我更喜歡一個解決方案,而不必在我的項目中添加一個庫,特別是現在我認爲我真的接近解決方案:) –