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

问题描述

取自 Angular 文档:

<块引用>

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

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

<块引用>

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

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

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

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

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

<li ng-repeat="applicationModule 中的appModule"id="{{appModule.Name}}"ng-class="{ 'selected' : selectedAppModule == '{{appModule.Name}}' }"ng-click="menuClicked(appModule.Name)"><a href="#Content/{{appModule.Name}}">{{appModule.Display}}</a>

注意在 ng-class 指令中如何使用双大括号，而在 ng-click 指令中则没有.

你怎么知道什么时候用，什么时候不用?

解决方案

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

从你的例子:

ng-repeat="applicationModule 中的appModule"

不需要大括号，因为这个表达式是由 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() 方法的包装器.将表达式转换为字符串是否有意义，那么使用 {{}} 也有意义.(非常欢迎任何反例)

Taken from the Angular documentation:

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]

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>

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.

From your example:

ng-repeat="appModule in applicationModules"

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

---

id="{{appModule.Name}}"

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

---

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

I'm pretty sure this can be written as:

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

And you get the same behaviour.

---

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

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.

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屋！