错误的

Question

取自Angular文件：

Angular Expressions
Angular表达式主要是类似JavaScript的代码片段放置在插值绑定中，例如

<span title="{{ attrBinding }}">{{ textBinding }}</span>

但也直接在指令中使用   属性，例如ng-click="functionExpression()"。

例如，这些是Angular中的有效表达式：

1 + 2 a + b user.name items [index]

但是我对何时使用双括号语法{{}}以及何时不使用时有点困惑。文档似乎表明在指令属性中使用表达式时不需要它们（参见上面的ng-click示例）。

虽然下面的代码可以提供相反的轶事证据：

<ul id="Menu">
        <li ng-repeat="appModule in applicationModules"
            id="{{appModule.Name}}"
            ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }" 
            ng-click="menuClicked(appModule.Name)">
            <a href="#Content/{{appModule.Name}}">{{appModule.Display}}</a>
        </li>
    </ul>

请注意在ng-class指令中如何使用双括号，而在ng-click指令中则不是。

你怎么知道何时使用它们以及何时不使用它们？

Answer 1

它取决于所讨论的指令属性及其使用的绑定类型。更进一步取决于你在给定情况下的意图。

从你的例子：

ng-repeat="appModule in applicationModules"

不需要大括号，因为此表达式由ng-repeat指令内的angular进行计算。

id="{{appModule.Name}}"

这里我们需要大括号，因为我们希望id等于表达式的值。

ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }"

我非常确定这可以写成：

ng-class="{ 'selected' :  selectedAppModule == appModule.Name }"

你得到了同样的行为。

ng-click="menuClicked(appModule.Name)"

在这个例子中，我们需要将ng-click绑定到名为menuClicked的方法。

一般情况下，当我们想要评估表达式时，我们会使用{{}}，在处理属性时，我们并不总是需要使用{{}}，因为在很多情况下，它们会在幕后进行评估。

简单提示需要{{}}时的经验法则是将其视为.ToString() - 方法的包装器。将表达式转换为字符串是有意义的，那么使用{{}}也是如此。（非常欢迎任何反例）

Answer 2

查看文档。 何时避免使用插值{{ }} 文档说该指令采用表达式，。对于ng-src，文档明确指出使用{{ }}。如果属性不是AngularJS指令，请使用插值。

错误的

ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }"

以上示例是混合插值和角度凹印的示例。

改为使用：

ng-class="{ 'selected' :  selectedAppModule == appModule.Name }"

来自文档：

为什么混合插值和表达式是不好的做法：


它增加了标记的复杂性

无法保证它适用于每个指令，因为插值本身就是一个指令。如果另一个指令在插值运行之前访问属性数据，它将获得原始插值标记而不是数据。

它会影响性能，因为插值会为范围添加另一个观察者。

由于不推荐使用，我们不对此进行测试，对AngularJS核心的更改可能会破坏您的代码。


— AngularJS Developer Guide - mixing interpolation and expressions

更新

不要使用插值：

ng-selected，请参阅AngularJS ng-selected Directive API Reference
ng-disabled，请参阅AngularJS ng-disabled Directive API Reference
ng-required
ng-if
ng-show
ng-hide
ng-open
ng-value
ng-repeat
ng-options

何时在angularJS中使用双括号{{}}

2 个答案:

错误的

为什么混合插值和表达式是不好的做法：

更新