本地化不与离子标签的流星标题

现在我需要添加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

本地化不与离子标签的流星标题

回答

相关问题