我已经仔细阅读了AngularJS关于这个主题的文档,然后摆弄了一个指令。这是小提琴。

以下是一些相关片段:

来自HTML: <窗格bi-title = "标题" title =“{{标题}}>{{文本}}> < /窗格 从窗格指令: scope: {biTitle: '=', title: '@', bar: '='},

有几件事我不明白:

为什么我必须使用“{{title}}”与“@”和“title”与“=”? 我也可以直接访问父范围,而不装饰我的元素与属性? 文档说:“通常情况下,通过表达式将数据从孤立的作用域传递到父作用域是可取的”,但这似乎也适用于双向绑定。为什么表达式路由会更好呢?

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


当前回答

@ get作为字符串

这不会创建任何绑定。您只是获得作为字符串传入的单词

=双向绑定

控制器所做的更改将反映在指令所持有的引用中,反之亦然

&这个行为有点不同,因为作用域得到一个函数,返回传入的对象。我想这是成功的必要条件。小提琴应该能说明这一点。

调用此getter函数后,结果对象的行为如下: 如果传递了一个函数:那么该函数在父(控制器)闭包中被调用时执行 如果传入了一个非函数:简单地获取一个没有绑定的对象的本地副本

这把小提琴应该能演示它们是如何工作的。特别注意使用get…希望能更好地理解我所说的&

其他回答

=表示双向绑定,即父作用域的变量引用。这意味着,当你在指令中改变变量时,它也会在父作用域中被改变。

@意味着变量将被复制(克隆)到指令中。

据我所知,<pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>也应该工作。Bi-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属性的值。{{}}不能与=一起使用。

使用@,你可以这样做title="{{title}},然后some"——{{title}}被插入,然后字符串"and them some"与它连接。最后一个串接的字符串是local/directive scope属性得到的。(你不能用=,只能用@。)

对于@,您将需要使用attr。$observe('title',函数(值){…})如果你需要在你的link(ing)函数中使用该值。例如,如果范围。Title == "…")不会像你期望的那样工作。注意,这意味着您只能异步访问该属性。 如果只使用模板中的值,则不需要使用$observe()。例如,模板:'<div>{{title}}</div>'。

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

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

是的,但前提是你不使用孤立的作用域。从指令中删除这一行

范围:{…}

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

文档中说:“通常情况下,通过表达式将数据从孤立的作用域传递到父作用域是可取的”,但这似乎也适用于双向绑定。为什么表达式路由会更好呢?

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

另请参阅

Lukas的孤立范围博客文章(涵盖@,=,&) Dnc253对@和=的解释 我关于作用域的博客般的回答——指令部分(在底部,就在摘要部分之前)有一个孤立作用域和它的父作用域的图片——指令作用域使用@表示一个属性,使用=表示另一个属性 在angularJS中& vs @和=的区别是什么

这里有很多很好的答案,但我想就@、=和&绑定之间的差异提供我的观点,这对我来说很有用。

这三种绑定都是通过元素属性将数据从你的父作用域传递到你指令的隔离作用域的方法:

@ binding is for passing strings. These strings support {{}} expressions for interpolated values. For example: . The interpolated expression is evaluated against directive's parent scope. = binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope. Changes to one model affects the other, and vice versa. & binding is for passing a method into your directive's scope so that it can be called within your directive. The method is pre-bound to the directive's parent scope, and supports arguments. For example if the method is hello(name) in parent scope, then in order to execute the method from inside your directive, you must call $scope.hello({name:'world'})

我发现通过一个更短的描述来参考作用域绑定更容易记住这些区别:

@属性字符串绑定 =双向模型绑定 &回调方法绑定

这些符号还可以更清楚地说明作用域变量在指令实现中的含义:

@字符串 =模型 &方法

按用处排序(至少对我来说):

= @ &

我一次性实现了所有可能的选项。

它处理所有的选项:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

为什么我必须使用“{{title}}”与“@”和“title”与“=”?

当你使用{{title}}时,只有父范围值将被传递给指令视图并计算。这仅限于一种方式,这意味着更改不会反映在父范围中。当你想要将在子指令中所做的更改反映到父作用域时,你也可以使用'='。这是双向的。

我也可以直接访问父范围,而不装饰我 元素的属性?

当指令中有scope属性(scope:{})时,你将不能再直接访问父作用域。但是仍然可以通过作用域访问它。美元的父母等等。如果从指令中删除作用域,则可以直接访问它。

文档中说:“通常需要从 隔离作用域通过表达式和父作用域”,但是 似乎工作与双向绑定也很好。为什么 表达路线更好吗?

这取决于上下文。如果你想调用带有数据的表达式或函数,你可以使用&,如果你想共享数据,你可以使用双向的方式使用'='

你可以在下面的链接中找到传递数据到指令的多种方式之间的差异:

AngularJS -隔离作用域- @ vs = vs &

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs