在 AngularJS html 模板中使用 ES6 箭头函数答案

【问题标题】：Using ES6 arrow functions in AngularJS html templates在 AngularJS html 模板中使用 ES6 箭头函数
【发布时间】：2018-02-26 08:04:08
【问题描述】：

是否可以像这样在 AngularJS html 模板中直接使用 ES6 箭头函数？

<div ng-if="results.filter(e => e.ext == 'xml').length > 0">Text</div>

'result' 是一个以 'ext' 为属性的对象列表。到目前为止，我一直在使用 lodash，并且效果很好：

<div ng-if="_.filter(results, { ext : 'xml' }).length > 0">Text</div>

但如果可能的话会改成 ES6...

有没有人有这方面的经验或一些提示或更好的想法？

【问题讨论】：

你可以这样做，angular会评估ng-if指令中的任何js表达式，但你不应该这样做。因为有很多版本的浏览器不支持 ES6。
@alexmac 这是 AngularJS，AngularJS 中的表达式有限制。见AngularJS Developer Guide - AngularJS Expressions vs. JavaScript Expressions。
现在很多浏览器都支持原生 ES6，去疯狂吧。 caniuse.com/#search=es6

标签： angularjs ecmascript-6 lodash

【解决方案1】：

ng-if directive 评估 AngularJS Expression 并且不允许函数声明。

来自文档：

AngularJS 表达式与 JavaScript 表达式

AngularJS 表达式类似于 JavaScript 表达式，但有以下区别：

无函数声明：您不能在 AngularJS 表达式中声明函数，即使在 ng-init 指令中也是如此。

如果您想运行更复杂的 JavaScript 代码，您应该将其设为控制器方法并从您的视图中调用该方法。如果你想自己 eval() 一个 AngularJS 表达式，请使用 $eval() method。

— AngularJS Developer Guide - Expressions

【讨论】：

为了澄清在 AngularJS 表达式中调用 eval()，您只能从表达式中调用 eval()，以评估本身是有效表达式的内容。例如。您可以从 ng-if 调用 $eval(expr)，但 expr 只能是控制器中定义的有效 Angular 表达式，例如'3*10|货币'

【解决方案2】：

不，正如 georgeawg 所说，您根本不能在表达式中声明函数（例如在“ng-if”中）。这部分是因为 Angular 旨在鼓励将任何业务逻辑放置在控制器中，以鼓励正确分离关注点。

Angular 表达式仅限于相当基本的事情，例如访问对象的属性或范围内的值，以及基本的格式化、排序和过滤。任何业务逻辑定义都属于控制器。

【讨论】：