AngularJS指令范围中的'@'和'='有什么区别? [英] What is the difference between '@' and '=' in directive scope in AngularJS?

问题描述

我已经仔细阅读了有关该主题的 AngularJS 文档，然后在其中摆弄了一条指令.这是小提琴.

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle.

以下是一些相关的摘要:

And here are some relevant snippets:

• 通过 HTML :

<pane bi-title="title" title="{{title}}">{{text}}</pane>

来自窗格指令:

From the pane directive:

scope: { biTitle: '=', title: '@', bar: '=' },

有几件事我没有得到:

• 为什么必须将"{{title}}"与'@'一起使用，并且将"title"与'='一起使用?
• 我是否还可以直接访问父范围，而不用属性装饰元素?
• 文档中说通常希望通过表达式将数据从隔离的范围传递到父范围" ，但这似乎也可以用于双向绑定.为什么表达途径会更好?

• Why do I have to use "{{title}}" with '@' and "title" with '='?
• Can I also access the parent scope directly, without decorating my element with an attribute?
• The documentation says "Often it's desirable to pass data from the isolated scope via expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?

我发现了另一个显示表达式解决方案的小提琴: http://jsfiddle.net/maxisam/QrCXh/

I found another fiddle that shows the expression solution too: http://jsfiddle.net/maxisam/QrCXh/

推荐答案

为什么必须在" @ "中使用"{{title}}"，而在" = "中使用"title"?

Why do I have to use "{{title}}" with '@' and "title" with '='?

@ 将本地/指令范围属性绑定到DOM属性的评估值.如果使用title=title1或title="title1"，则DOM属性"title"的值就是字符串title1.如果使用title="{{title}}"，则DOM属性"title"的值是{{title}}的内插值，因此，该字符串将是当前设置为父范围属性"title"的任何值.由于属性值始终是字符串，因此在使用 @ 时，在指令范围内，此属性始终以字符串值结尾.

@ binds a local/directive scope property to the evaluated value of the DOM attribute. If you use title=title1 or title="title1", the value of DOM attribute "title" is simply the string title1. If you use title="{{title}}", the value of the DOM attribute "title" is the interpolated value of {{title}}, hence the string will be whatever parent scope property "title" is currently set to. Since attribute values are always strings, you will always end up with a string value for this property in the directive's scope when using @.

= 将本地/定向范围属性绑定到父范围属性.因此，通过 = ，您可以将父模型/范围属性名称用作DOM属性的值.您不能将{{}}与 = 一起使用.

= binds a local/directive scope property to a parent scope property. So with =, you use the parent model/scope property name as the value of the DOM attribute. You can't use {{}}s with =.

使用@，您可以执行类似title="{{title}} and then some"的操作-插入{{title}}，然后将字符串"and them some"与其连接在一起.最终的串联字符串是local/directive范围属性所获得的. (您不能使用 = 来执行此操作，只能使用 @ .)

With @, you can do things like title="{{title}} and then some" -- {{title}} is interpolated, then the string "and them some" is concatenated with it. The final concatenated string is what the local/directive scope property gets. (You can't do this with =, only @.)

使用 @ ，如果需要使用链接功能中的值，则需要使用attr.$observe('title', function(value) { ... }).例如，if(scope.title == "...")将无法正常运行.请注意，这意味着您只能 异步 . 如果仅在模板中使用值，则无需使用$ observe().例如template: '<div>{{title}}</div>'.

With @, you will need to use attr.$observe('title', function(value) { ... }) if you need to use the value in your link(ing) function. E.g., if(scope.title == "...") won't work like you expect. Note that this means you can only access this attribute asynchronously. You don't need to use $observe() if you are only using the value in a template. E.g., template: '<div>{{title}}</div>'.

使用 = ，您无需使用$ observe.

With =, you don't need to use $observe.

是否可以直接访问父级作用域而不用属性来装饰我的元素?

Can I also access the parent scope directly, without decorating my element with an attribute?

是的，但是只有在不使用隔离范围的情况下才可以.从指令中删除此行

Yes, but only if you don't use an isolate scope. Remove this line from your directive

scope: { ... }

，那么您的指令将不会创建新的作用域.它将使用父范围.然后，您可以直接访问所有父范围属性.

and then your directive will not create a new scope. It will use the parent scope. You can then access all of the parent scope properties directly.

文档说:通常希望通过表达式将数据从隔离的范围传递到父范围"，但这似乎也可以与双向绑定一起使用.为什么表达途径会更好?

The documentation says "Often it's desirable to pass data from the isolated scope via an expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?

是的，双向绑定允许本地/指令范围和父范围共享数据. 表达式绑定"允许指令调用由DOM属性定义的表达式(或函数)-您还可以将数据作为参数传递给表达式或函数.因此，如果您不需要与父级共享数据(您只想调用父级作用域中定义的函数)，则可以使用& 语法.

Yes, bidirectional binding allows the local/directive scope and the parent scope to share data. "Expression binding" allows the directive to call an expression (or function) defined by a DOM attribute -- and you can also pass data as arguments to the expression or function. So, if you don't need to share data with the parent -- you just want to call a function defined in the parent scope -- you can use the & syntax.

另请参见

• Lukas的隔离范围博客帖子(涵盖@， =，&)
• dnc253的解释中的>
• 我的博客-像关于范围的答案一样-指令部分(位于底部，在摘要"部分的前面)具有隔离范围及其父范围的图片-指令范围使用@对于一个属性，对于另一个属性= =
• &与vs @和=在angularJS中

• Lukas's isolated scope blog post (covers @, =, &)
• dnc253's explanation of @ and =
• my blog-like answer about scopes -- the directives section (way at the bottom, just before the Summary section) has a picture of an isolate scope and its parent scope -- the directive scope uses @ for one property and = for another
• What is the difference between & vs @ and = in angularJS

这篇关于AngularJS指令范围中的'@'和'='有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！