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"被连接用它.最后连接的字符串是本地/指令范围属性获得的内容.(您不能使用 = 执行此操作，只能使用 @.)

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) { ... })您的链接(ing)函数中的值.例如， if(scope.title == "...") 不会像你期望的那样工作.请注意，这意味着您只能异步.如果您仅在模板中使用该值，则不需要使用 $observe().例如，模板:'<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

范围:{ ... }

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

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