1

AngularJS でangular-translationおよびangular-foundationモジュールを使用しており、Foundation トップバーを次のように定義しています。

<top-bar custom-back-text="true" back-text="My back text">

[...]

</top-bar>

に翻訳フィルタを適用する必要がありますMy back text。すでにこれら2つのソリューションを試しましたが、成功しませんでした:

例 1 - コード

<top-bar custom-back-text="true" back-text="'BACK.KEY' | translate">

例 1 - メニュー内のテキスト

BACK.KEY

例 2 - コード

<top-bar custom-back-text="true" back-text="{{ 'BACK.KEY' | translate }}">

例 2 - メニュー内のテキスト

'BACK.KEY' | translate

これらの 2 つのモジュールでこれを達成する可能性はありませんか?

使用バージョン

angular-translate: 2.4.2
angular-foundation: 0.5.1
4

1 に答える 1

0

If you check the js source code of foundation you will find this piece of code that handles back button

if (settings.custom_back_text == true) {
    $('h5>a', $titleLi).html(settings.back_text);
} else {
    $('h5>a', $titleLi).html('&laquo; ' + $link.html());
}
$dropdown.prepend($titleLi);

So it creates new element and adds to dropdown, result of which is that it copies the value you specified in the back_text. By that time "translate" is not resolved so it copies whatever you put there.

A quick hack to do to solve it you could listen for language change by doing

$rootScope.$on("$translateChangeSuccess", function...

As you can see in the piece of code from foundation.js it creates "a" element inside "h5", so you can do something like this

$rootScope.$on("$translateChangeSuccess", function(){
  angular.element(".dropdown h5>a").html($filter('translate')('BACK'))
})

where "BACK" is the key used for translation.

But keep in mind that it's not a good practice to manipulate DOM inside controller, so you may create directive for that.

Though there may be better way to achieve it, this could be just quick hack to do the thing.

于 2014-12-17T11:21:28.820 に答える