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

Question

取自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()则是将其视为-method 的包装器.将表达式转换为字符串是有意义的,那么使用{{}}也是如此.(非常欢迎任何反例)