在AngularJS的指令范围中的’@’和’=’有什么区别?

前端之家收集整理的这篇文章主要介绍了在AngularJS的指令范围中的’@’和’=’有什么区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我仔细阅读了AngularJS文档的主题,然后用一个指令。这是 fiddle

以下是一些相关的片段:

>从HTML:

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

>从pane指令:

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

有几件事我不能得到:

>为什么我必须使用“{{title}}”与“@”和“title”与“=”?
>我还可以直接访问父作用域,而不用属性装饰我的元素?
>文档说“通常需要通过表达式将数据从隔离的范围传递到父范围”,但是这似乎也与双向绑定一样正常。为什么表达式的路线会更好?

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

Why do I have to use “{{title}}” with ‘@‘ and “title” with ‘=‘?

@将local / directive scope属性绑定到DOM属性的计算值。如果使用title = title1或title =“title1”,DOM属性“title”的值就是字符串title1。如果使用title =“{{title}}”,DOM属性“title”的值是{{title}}的内插值,因此字符串将是当前设置的父范围属性“title”。由于属性值始终是字符串,因此在使用@时,在指令的作用域中,此属性的字符串值将始终为字符串值。

=将本地/指令作用域属性绑定到父作用域属性。所以使用=,您使用父模型/ scope属性名称作为DOM属性的值。您不能对=使用{{}}。

使用@,您可以执行诸如title =“{{title}}”之类的操作,然后插入一些“ – {{title}}”,然后将字符串“and them some”与其连接。最后连接的字符串是local / directive scope属性获取的。 (你不能这样用=,只有@。)

使用@,如果你需要使用链接(ing)函数中的值,你需要使用attr。$ observe(‘title’,function(value){…})。例如,if(scope.title ==“…”)不会像你所期望的那样工作。请注意,这意味着您只能访问此属性asynchronously
如果只使用模板中的值,则不需要使用$ observe()。例如,template:’

{{title}}

‘。

使用=,您不需要使用$ observe。

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?

是的,双向绑定允许本地/指令作用域和父作用域共享数据。 “表达式绑定”允许指令调用由DOM属性定义的表达式(或函数),您还可以将数据作为参数传递到表达式或函数。因此,如果您不需要与父级共享数据 – 您只想调用父级作用域中定义的函数 – 您可以使用&句法。

也可以看看

> Lukas’s isolated scope blog post(covers @,=,&)
> dnc253’s explanation of @和=
> my blog-like answer关于范围 – 指令部分(底部的方式,就在摘要部分之前)有一个隔离范围及其父范围的图片 – 指令范围使用@表示一个属性,= =表示另一个属性
> What is the difference between & vs @ and = in angularJS

猜你在找的Angularjs相关文章