本地化不與離子標籤的流星標題

現在我需要添加i18n到我的項目。在嘗試學習Angular官方I10n和角度翻譯之後，我因爲缺乏對我有意義的例子而放棄了它們。

最後我用：

meteor npm install angular-localization --save

這個包很簡單：每一種語言都有一個包含所有鍵和值對應的JSON文件。 i18n指令只是加載值並設置爲元素的innerText。我做了一些修改，並喜歡使用它，直到我試圖設置ion-tab的標題。

主要功能在我的修改後的角度定位的來源是：

angular 
    .module('i18n') 
    .directive('i18n', ['$rootScope', '$i18n', function($rootScope, $i18n) { 
    return { 
     priority: 100, 
     link: function(scope, element, attrs) { 

      function applyTabTitle(translation) { 
       var tabs = element.parent(); 

       var idx = tabs.children('ion-tab').index(element); 
       var a = tabs.children('a').eq(idx); 
       a.children('span.tab-title').text(translation); 
      } 

      function applyLocal() { 
       try { 
        var jsn = JSON.parse(attrs.i18n); 
        for (prop in jsn) { 
        var translation = $i18n(jsn[prop]); 

        if (prop == 'tabtitle') { 
         applyTabTitle(translation); 
        } else { 
         element.attr(prop, translation); 
        } 
       } 
      } catch (e) { 
       var translation = $i18n(attrs.i18n); 
       element.text(translation); 
      } 
     } 

     applyLocal(); 

     $rootScope.$on('i18n.language:change', function() { 
      applyLocal(); 
     }); 
     } 
    } 
}]);

如圖ionTabNav限定的離子選項卡將被擴展成像這樣

<ion-tab icon-on="ios-icon-home" href="#/home"></ion-tab> 
<a ng-class="tab-item"> 
    <i class="icon"></i> 
    <span class="tab-title" ng-bind-html="title"></span> 
</a>

所以，我不能只用這個（主頁是語言鍵）：

<ion-tab data-i18n="homepage" ...>..</ion-tab>

因爲「element.text（translation）」會破壞擴展。這就是爲什麼我發明了「applyTabTitle」功能，然後使用HTML如下：

<ion-tab data-i18n='{"tabtitle":"profile"}'>..</ion-tab>

但遺憾的是，經過短短重定向從登錄頁面網頁上的「$ state.go標籤的標題仍然是空白（「主頁'）「，而如果我刷新主頁，標題顯示正確。

我想也許是因爲i18n重定向沒有在ionTab重定向之前運行。所以我試圖將優先級設置爲100.但沒有效果。

也許我從一開始就走錯了路。我想說的是這些高度自動化的框架非常難以定製。發展過程是如此坎坷。

非常感謝任何提示。

來源

2016-09-15 vdonkey

我找到了解決這個問題的方法。不是很好，但它的工作。

只要改變applyTabTitle功能爲以下：

function applyTabTitle(translation) { 
    var tabs = element.parent(); 

    var idx = tabs.children('ion-tab').index(element); 
    var a = tabs.children('a').eq(idx); 
    var txt = applyParams(translation, attrs); 
    a.children('span.tab-title').text(txt); 
    $rootScope.$on('$ionicView.enter', function() { 
    a.children('span.tab-title').text(txt); 
    }); 
}

的想法是找到一個時間之後離子標籤已本身擴大，再次修正文本。

來源

2016-09-16 06:35:05 vdonkey

本地化不與離子標籤的流星標題

回答

相關問題