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

Question

摘自 Angular 文档:

Angular Expressions
Angular expressions are JavaScript-like code snippets that are mainly placed in interpolation bindings such as

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

but also used directly in directive attributes such as ng-click="functionExpression()".

For example, these are valid expressions in 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

这取决于所讨论的指令属性及其使用的绑定(bind)类型。此外，这取决于您在特定情况下的意图。

根据您的示例:

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 绑定(bind)到名为 menuClicked 的方法。

<小时/>

通常，当我们想要计算表达式时，我们会使用 {{}}，而在处理属性时，我们并不总是需要使用 {{}}，因为它们在许多情况下是在幕后计算的。

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