在 AngularJs 中使用带有翻译过滤器的变量

Question

我正在做一个 AngularJs 项目，我正在按以下方式使用翻译过滤器：

<h2>{{'This is my text' | translate}}</h2>

它工作正常，但我希望能够在我的翻译中使用变量。这是我尝试过的：

在控制器中：

vm.text = "This {{toReplace}} is a variable.";
vm.myVariable = "random value";

在html中：

<h2>{{vm.text | translate:'{ toReplace: vm.myVariable }'}}</h2>

它不会用 myVariable 的内容替换 {{toReplace}}。相反，页面显示 "This {{toReplace}} is a variable."

我应该怎么做才能完成这项工作？

Answer 1

您是否尝试过使用指令而不是过滤器？像这样：

<h2 translate="vm.text" translate-values={'toReplace':vm.myVariable}"></h2>

Answer 2

vm.text 必须包含一个有效的翻译键，您应该在您的语言文件中定义它。翻译键的值将为 "This {{toReplace}} is a variable."。然后你的 HTML 应该正确呈现。

如果您只想在不支持国际化的情况下呈现此文本，您可以这样做：

<h2>This {{vm.toReplace}} is a variable.</h2>

Answer 3

这是对我有用的解决方案，考虑到 'myVariable' 是我的控制器中定义的变量：

<h2 data-translate>This {{vm.myVariable}} is a variable</h2>

棘手的部分是，就像使用翻译过滤器时一样，元素中的文本不是正在显示的文本，而是要翻译的元素的 ID。在翻译文件 (po) 中，您必须有一个 ID 为 'This {{vm.myVariable}} is a variable' 的元素，包括变量的名称。如果您需要显示相同的文本但数据来自不同的变量，则必须使用其自己的 ID 声明不同的翻译，即使只有文本的变量部分不同。

例如，这必须是翻译文件中的不同条目：

<h2 data-translate>This {{vm.myVariable2}} is a variable</h2>

在 AngularJs 中使用带有翻译过滤器的变量

Using variables with translate filter in AngularJs

angularjs

angular-translate