使用 AngularJS 嵌套花括号答案

【问题标题】：Nested curly braces with AngularJS使用 AngularJS 嵌套花括号
【发布时间】：2013-09-17 08:17:56
【问题描述】：

我目前正在使用angular-translate 进行一个项目。我的目标是创建一个翻译映射，允许开发人员在不中断翻译的情况下更改对象模型。

例如，假设我有一个订单保存在我的范围内：

$scope.order = {
    numberOfItems: 5,
    // ...
};

还有一个带有显示项目数量属性的翻译图：

var translationsEN = {
    itemsNumber: "{{numberOfitems}} item(s)",
    // ...
};

var translationsFR = {
    itemsNumber: "{{numberOfItems}} article(s)",
    // ...
};

有了这张地图，我可以轻松做到这一点：

{{'itemsNumber' | translate:order}}

但是，如果开发人员想更改numberOfItems 属性的名称，他也必须更改翻译映射，这非常挑剔……所以，我为此更改了翻译映射：

var translationsEN = {
    itemsNumber: "{{number}} item(s)",
    // ...
};

var translationsFR = {
    itemsNumber: "{{number}} article(s)",
    // ...
};

现在，开发人员只需传输一个带有必要值的简单对象，如下所示：

<span translate="order.misc.itemsNumber"
       translate-values="{ number:{{order.numberOfItems}} }">
</span>

但是，如您所见，我不再使用过滤器，而是使用指令。我找不到任何方法来做这样的事情：

{{'order.misc.itemsNumber' | translate:'{ number:{{order.numberOfItems}} }'}}

这也不起作用：

{{'order.misc.itemsNumber' | translate:'{ number:order.numberOfItems }'}}

是否有任何解决方案允许我使用过滤器，或者我应该只使用指令？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-filter

【解决方案1】：

尝试不带引号：

{{'order.misc.itemsNumber' | translate: {number: order.numberOfItems}}}

【讨论】：

这不起作用，它显示一些空白值：“item(s)”和“article(s)”