一尘不染

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

angularjs

取自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指令中则不使用双括号。

您如何知道何时使用它们以及何时不使用它们?


阅读 242

收藏
2020-07-04

共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()则是将其视为-
方法的包装。将表达式转换为字符串确实有意义,然后使用{{}}也是如此。(非常欢迎任何反例)

2020-07-04