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

Question

取自Angular文档：

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

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

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

例如，以下是Angular中的有效表达式：

1 + 2 a + b user.name项目[索引]

但是，对于何时使用双括号语法{{}}以及何时不使用双括号语法，我有些困惑。该文档似乎建议您在指令属性中使用表达式时不需要它们（请参见上面的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()则是将其视为-
方法的包装。将表达式转换为字符串确实有意义，然后使用{{}}也是如此。（非常欢迎任何反例）