角度基础和角度翻译:将翻译应用于属性背文本

Question

我将角平移和角形基础模块与AngularJS一起使用，并定义了基金会顶部栏，如下所示：

<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

Answer 1

如果您检查基金会的js源代码，您将发现这段处理后退按钮的代码。

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

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

一种快速解决问题的方法--你可以通过

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

正如您在foundation.js代码中看到的那样，它在"h5“中创建了”一个“元素，因此您可以这样做

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

其中，"BACK“是翻译的关键。

但是请记住，在控制器中操作DOM并不是一个好做法，因此您可以为此创建指令。

虽然可能有更好的方法来实现它，但这可能只是快速的黑客做这件事。