在AngularJS中，指令范围中的'@'和'='有什么区别？

Question

我仔细阅读了关于这个主题的AngularJS文档，然后随意修改了一个指令。小提琴在这里。

下面是一些相关的片段：

>

来自HTML：

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

在窗格指令中：

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

有几件事我不明白：

• 为什么必须使用“{{title}}”与'@'和“title”与'='？
• 是否也可以直接访问父范围，而不使用属性装饰元素？
• 文档说“通常希望通过表达式将数据从独立作用域传递到父作用域”，但这似乎也适用于双向绑定。为什么表达式路由会更好？

我找到了另一个显示表达式解的fiddle：http://jsfiddle.net/maxisam/qrcxh/

Answer 1

为什么我必须将“{{title}}”与“@”一起使用，而将“title”与“=”一起使用？

@将本地/指令范围属性绑定到DOM属性的计算值。如果使用title=title1或title=“title1”，DOM属性“title”的值只是字符串title1。如果使用title=“{{title}}”，DOM属性“title”的值是{{title}}的内插值，因此该字符串将是父作用域属性“title”当前设置的值。由于属性值总是字符串，所以在使用@时，在指令的作用域中，您将始终得到该属性的字符串值。

=将本地/指令作用域属性绑定到父作用域属性。因此，对于=，可以使用父模型/作用域属性名作为DOM属性的值。不能将{{}}s与=一起使用。

使用@，您可以执行以下操作：title=“{{title}}然后some”--{{title}}被插值，然后字符串“and them some”与之相连。最后一个串联字符串是本地/指令作用域属性所获得的。（不能用=做这个，只能用@。）

对于@，如果需要在link(ing)函数中使用值，则需要使用attr.$observe('title',function（value）{...}）。例如，if(scope.title==“...”）不能像您期望的那样工作。请注意，这意味着您只能异步访问此属性。如果只使用模板中的值，则不需要使用$Observe()。例如，模板:'

{{title}}

'。

对于=，您不需要使用$Observe。

我是否也可以直接访问父范围，而不使用属性装饰我的元素？

可以，但前提是不使用隔离作用域。从指令中删除此行

作用域：{...}

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

文档中说，“通常希望通过表达式将数据从独立作用域传递到父作用域”，但这似乎也适用于双向绑定。为什么表达路线会更好？

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

另见

• Lukas的独立范围博客文章（覆盖@,=,&)
• DNC253对@and=
的解释
• 我关于作用域的类似于博客的回答--directives部分（位于底部，就在Summary部分之前）有一个隔离作用域和其父作用域的图片--directive作用域对一个属性使用@而对另一个属性使用=
• AngularJS中的&vs@和=有什么区别