何时在angularJS中使用双括号{{}} [英] When to use double braces {{}} in angularJS

问题描述

来自Angular文档:

Taken from the Angular documentation:

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

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

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

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

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

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

For example, these are valid expressions in Angular:

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

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

但是，对于何时使用双括号语法{{}}以及何时不使用双括号语法，我有些困惑.该文档似乎建议您在指令属性中使用表达式时不需要它们(请参见上面的ng-click示例).

However I'm a little confused as to when to use the double braces syntax {{}} and when not to. The documentation seems to suggest that you don't need them when using expressions within the directive attributes (see the ng-click example above).

尽管以下有效的代码提供了相反的传闻证据:

Although the following code which works offers anecdotal evidence to the contrary:

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

Note how in the ng-class directive the double braces are used and inside the ng-click directive they are not.

您怎么知道什么时候使用它们，什么时候不使用?

How do you know when to use them and when not to?

推荐答案

这取决于所讨论的指令属性及其使用的绑定类型.此外，它还取决于您在给定情况下的打算.

It depends on the directive attribute in question and the type of binding it uses. Further more it depends on what you intend in the given situation.

根据您的示例:

ng-repeat="appModule in applicationModules"

不需要大括号，因为此表达式是通过ng-repeat指令内的angular求值的.

No need for the braces as this expression is evaluated by angular inside the ng-repeat directive.

id="{{appModule.Name}}"

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

Here we need braces as we want the id to be equal to the value of the expression.

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

我很确定这可以写成:

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

您会得到相同的行为.

And you get the same behaviour.

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

在此示例中，我们需要将ng-click绑定到名为menuClicked的方法.

In this example we need the ng-click to be bound to the method named menuClicked.

通常，当我们要评估表达式以及处理属性时，我们通常不使用{{}}，因为在许多情况下它们是在幕后进行评估的.

Generally we use {{}} when we want to evaluate the expression and when dealing with attributes we don't always need to use {{}} as they are in many cases evaluated behind the scenes.

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

Simple Tip A rule of thumb for when {{}} is needed is by thinking of it as a wrapper for a .ToString()-method. Does converting the expression to a string make sense, then so does using {{}}. (Any counter examples are very welcome)

这篇关于何时在angularJS中使用双括号{{}}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！