2014-10-29 92 views
1

我正在使用AngularJS並創建了一個模塊,其中包含一個工廠和一個過濾器。 Factory獲得本地json文件翻譯),並且過濾器提供了一個返回文本翻譯版本的函數。所以代碼如下所示:

angular 
    .module('i18n', []) 
    .factory('translationDataFact', ['$http', function($http){ 

     var t = {}; 
     var user = {}; 
     t.defaultLanguage = 'en-GB'; 
     t.languageFile = null; 

     t.init = function(){ 
      t.setLanguage(); 
      if(!t.languageFile){ 
       $http 
        .get('translations/' + t.defaultLanguage + '.json') 
        .success(function(data){ 
         t.languageFile = data.strings; 
        }) 
        .error(function(error){ 
         console.log(error); 
        }); 
      } 
     } 

     t.setLanguage = function(){ 
      /* change default language to User language here */ 
      if(user.id){ 
       t.defaultLanguage = user.language; 
      } 
      return t.defaultLanguage; 
     } 

     t.init(); 

     return t.languageFile; 
    }]) 
    .filter('t', ['translationDataFact', function (translationDataFact) { 

     var translate = function (stringIdenitfier) { 

      var translation = translationDataFact.languageFile[stringIdenitfier]; 

      if(translation){ 
       return translation; 
      } 

      return "translate me!!"; 
     }; 

     return translate(stringIdenitfier); 

    }]); 

然後我想使用的過濾器來翻譯變量的名字,像這樣

{{"string" | t }} 

我遇到的問題是,我不知道如何確保

  1. 的工廠的返回在過濾器運行之前設置。
  2. 此外,我很困惑我如何防止整個應用程序呈現,直到這個過濾器準備好了?

任何幫助將是驚人的,因爲我失去了:(

+0

我想你的意思是'返回t;'在工廠結束時。 – 2014-10-29 17:26:38

+0

我不認爲我需要所有的t,我只是返回t.languageFile。 – 2014-10-29 17:38:12

+2

然後你返回的只是'null'。即使回調已經改變了't.languageFile'的值,返回值仍然是'null'。你正在返回一個*值*,而不是一個變量/引用。 – 2014-10-29 17:41:30

回答

0

是否有一個理由,爲什麼你不使用現有angularjs翻譯庫像angular-translate

+0

我還沒有看過這個庫,能否使用這種語言從外部文件動態加載我的json?我注意到有一個動態的例子,但它看起來不動態? – 2014-10-29 17:42:55

+0

您當然可以ajax加載翻譯json文件,我相信這是在您看到的動態示例中顯示的。如果你正在尋找從你的應用程序的外部資源加載翻譯,你應該能夠像我在這裏解釋api文檔http://angular-translate.github.io/docs/#/api/pascalprecht.translate.$ translateUrlLoader – jcmwright80 2014-10-30 14:37:02

0
  1. 在工廠方法U需要返回服務本身,而不是操作結果(我不確定你想從這個服務中究竟得到什麼)

  2. 當你返回t.language時,它總是爲空,它將保持null呃...因爲你的http調用是異步的。

  3. 我將使這樣:

    app.module( 'translationDataFact',[ '$資源',函數($資源){
    變種T = {};
    t.init =函數(){ t.result = $資源( '...');
    }
    t.init()
    返回噸; }]);

在控制器中有: $ scope.language = translationDataFact.result;

您使用參數進行過濾器,在過濾器內您可以檢查語言是否未定義。 所以後來你寫:

{{ "string" | t:language} 

和語言後「到達」你看到的翻譯。

0

爲了回答您的問題:

  1. 你的工廠應該返回的東西,可以要求對特定翻譯。如果翻譯沒有準備好,只需返回一些基本的東西,如空字符串或null。例如

    return translations.t(languageFile, translationKey);

    t()將是檢查的translations內部數據結構和可返回翻譯無論是結果,或者如果翻譯尚未加載之前提到的值的函數。

  2. 你可以做你的頂級元素上像ng-show="translations.isLoaded()",但你需要設置你的最高水平控制器的$scope一個參考translations服務。您可能想要在$rootScope上執行此操作,以便您的翻譯服務始終可在控制器中使用。