如何在 AngularJS 的视图中嵌套表达式？答案

【问题标题】：How to nest expressions in AngularJS' views?如何在 AngularJS 的视图中嵌套表达式？
【发布时间】：2015-05-18 07:13:10
【问题描述】：

我正在使用 Angular Material 和 angular-translate。

基本上在使用 AM 的 md-select 时我有：

<md-select-label>{{ userLanguage ? userLanguage.chosenLanguage: "Choose language"}}</md-select-label>

如果未选择任何选项，则显示选择语言，否则显示已选择的选项。

最后，我使用 angular-translate 来翻译应用程序视图中的所有标签（例如“选择多种语言”），例如：

{{ 'LB_CHOOSE_LANGUAGE' | translate }}

但是，当我尝试通过以下方式嵌套 2 个表达式（三元运算符 + 角度平移过滤器）时：

{{ userLanguage ? userLanguage.chosenLanguage : {{ 'LB_CHOOSE_LANGUAGE' | translate }} }}

我得到无效的语法：

错误：[$parse:syntax] http://errors.angularjs.org/1.4.0-rc.2/$parse/syntax

关于如何处理嵌套表达式的任何线索？

【问题讨论】：

你为什么不直接使用<md-select-label>{{ 'LB_CHOOSE_LANGUAGE' | translate }}</md-select-label>？
因为选择选项时，不会替换标签。这就是 md-option/md-label Web 组件的工作原理
尝试以下方式：<md-select-label>{{ userLanguage ? userLanguage.chosenLanguage : ('LB_CHOOSE_LANGUAGE' | translate) }}</md-select-label>
好吧，你不能像{{somehing, {{something else}} }}这样嵌套表达式，但也许你可以这样做：userLanguage ? (userLanguage.chosenLanguage) : ('LB_CHOOSE_LANGUAGE' | translate)。作为演示的小提琴：jsfiddle.net/uxpVw/9

【解决方案1】：

Handlebar 语法暗示了一个 JavaScript 表达式，或者更具体地说，一个 Angular expression。在把手中使用把手没有意义，因为您已经告诉编译器您正在从 HTML 切换到 JavaScript。

话虽如此，您可以在没有内部把手的情况下重写您的表达式：

{{ (userLanguage ? userLanguage.chosenLanguage : 'LB_CHOOSE_LANGUAGE') | translate }}

【讨论】：

这样，userLanguage.chosenLanguage 中存储的值将被翻译，我不知道这是否是 OP 想要的。
此解决方案有效。但是，Nikos Paraskevopoulos 和 TeoMor 的更准确，因为我的目标是只翻译标签，而不是实际选择的语言
是的，但是这可以在控制器或过滤器内部解决，具体取决于数据是什么以及修复它的意义所在。没有更多的上下文很难知道，但知道不可能嵌套把手仍然很重要。
Angular-translate 的过滤器内置在模块中。我已经在其他模块中进行了更改，但我相信使用“使用变通办法”而不是“幕后变通办法”总是更好。我错了吗？
我不知道这是否“错误”，但我认为标记应该尽可能简单。一旦我的 HTML 看起来太 JavaScripty，我就会倾向于使用函数 {{ returnSomethingAppropriate(userLanguage) }}