1

我在 AngularJS 中使用angular-translation和angular-foundation模块，并定义了 Foundation 顶栏，如下所示：

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

[...]

</top-bar>

我需要将翻译过滤器应用于My back text. 已经尝试了这两种解决方案，但没有成功：

示例 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

我有什么问题吗，或者这两个模块不可能实现这一点？

使用过的版本

angular-translate: 2.4.2
angular-foundation: 0.5.1
4

1 回答 1

0

如果你查看foundation的js源代码，你会发现这段处理后退按钮的代码

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

因此它会创建新元素并添加到下拉列表中，其结果是它复制了您在 back_text 中指定的值。到那时“翻译”还没有解决，所以它会复制你放在那里的任何东西。

一个快速的破解方法来解决它，您可以通过以下方式聆听语言变化

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

正如您在foundation.js 中的一段代码中看到的那样，它在“h5”中创建了“a”元素，因此您可以执行以下操作

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

其中“BACK”是用于翻译的键。

但请记住，在控制器内部操作 DOM 不是一个好习惯，因此您可以为此创建指令。

尽管可能有更好的方法来实现它，但这可能只是快速破解。

于 2014-12-17T11:21:28.820 回答