AngularJS：是在什么范围的指令之间的'@'和'='的区别 [英] AngularJS : What is the difference between '@' and '=' in directive scope

问题描述

我已经仔细阅读关于这个专题的AngularJS文档，然后用一个指令拨弄左右。这里的小提琴。

和这里有一些相关的片段：

• 从HTML：

   ＆LT;面板双TITLE =称号称号={{title}}的＆GT; {{文本}}＆LT; /窗格＆GT;
   




• 从窗格指令：

   范围：{biTitle：'='，标题：@栏：'='}，
   

有几件事情我不明白：

• 为什么我必须使用{{title}}会与@和称号与=？


• 可我也直接访问父范围，不与属性装饰我的元素？


• 文档说的往往是希望通过前pression和父范围从隔离范围传递数据的，但是这似乎很好地工作具有双向约束力了。为什么会前pression路线比较好？

我发现了另一个小提琴，显示前pression解决方案太： http://jsfiddle.net/maxisam/QrCXh/

解决方案

  

为什么我必须使用{{title}}会与@和称号与=？

@结合本地/指令作用域属性的DOM属性的评估值。如果你使用标题= TITLE1 或标题=TITLE1，DOM属性的值标题是简单的字符串 TITLE1 。如果你使用标题={{title}}的的DOM属性的值标题是 {{标题的插值} } ，因此该字符串将任何父作用域属性称号目前设置为。由于属性值始终为字符串，你将永远与这个属性的指令的使用范围时，将字符串值结束@

=结合本地/指令范围属性的父作用域属性即可。因此，与=，您可以使用父模型/作用域属性的名称作为DOM属性的值。不能使用 {{}} s的=。

通过@，你可以做这样的事情标题={{title}}的，然后一些 - {{title}}的内插，然后字符串和他们一些是连接在一起的。最后串联的字符串是本地/指令scope属性得到什么。 （你不能用=做到这一点，只有@）。

通过@，你需要使用 ATTR。$观察（标题，功能（价值）{...}）如果你需要使用的值在您的链接（ING）的功能。例如，如果（scope.title ==...）不会像你期望的工作。请注意，这意味着你只能访问这个属性<一个href=\"https://github.com/angular/angular.js/wiki/Understanding-Directives\">asynchronously.
你不需要使用$观察（）如果你只使用在模板中的值。例如，模板：'＆LT; D​​IV＆GT;的{{title}}＆LT; / DIV＆GT;

。

通过=，你不需要使用$观察。

  

我可以也直接访问父范围，不与属性装饰我的元素？

是的，但是只有当你不使用分离的范围。从你的指令删除此行 - 范围：{...} - 然后你的指令将无法创建新范围。它将使用父范围。然后，您可以访问所有的父作用域属性直接。

  

文档说通常这需要通过前pression和父范围从隔离范围传递数据，但似乎好工作具有双向约束力了。为什么会前pression路线比较好？

是的，双向绑定允许本地/指令范围和数据共享父范围。 前pression结合允许指令调用由DOM属性定义的前pression（或功能） - 你也可以传递数据作为参数传递给前pression或功能。所以，如果你不需要与父共享数据 - 你只是想调用父范围内定义的函数 - 你可以使用＆放大器;语法。​​

另请参见

• 卢卡斯的隔离范围博客文章（包括@，=，＆安培;）


• dnc253's @和=
的解释

• my有关范围类似博客的答案 - 在指令部分（的方式在底部，就在摘要部分之前）具有分离范围的图片，它的父范围 - 该指令范围使用@为一个属性和=另一


• What之间和放大器的区别; VS @和=在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:

• from the html:

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

• from the pane directive:

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

There are several things I don't get:

• 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 an expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?

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

解决方案

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

@ 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 @.

= 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 =.

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 @.)

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>'.

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?

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.

See also

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