angularjs - AngularJS 指令范围内的 '@' 和 '=' 有什么区别？

Question

我仔细阅读了有关该主题的 AngularJS 文档，然后摆弄了一个指令。这是fiddle .

这里是一些相关的片段:

• 来自HTML:

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

• 来自 Pane 指令:

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

有几件事我不明白:

• 为什么我必须将 "{{title}}" 与 '@' 一起使用，并将 "title" 与 ' 一起使用='？
• 我也可以直接访问父作用域，而不用属性修饰我的元素吗？
• 文档说“通常需要通过表达式将数据从隔离范围传递到父范围”，但这似乎也适用于双向绑定(bind)。为什么表达路线会更好？

我发现另一个 fiddle 也显示了表达式解决方案:http://jsfiddle.net/maxisam/QrCXh/

Answer 1

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

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

= 将本地/指令作用域属性绑定(bind)到父作用域属性。因此，使用 =，您可以使用父模型/范围属性名称作为 DOM 属性的值。您不能使用{{}}带有 =。

使用@，你可以做类似title="{{title}} and then some"这样的事情-- {{title}} 被插值，然后字符串“andthemsome”与其连接。最终的连接字符串是本地/指令范围属性所获取的。 (您不能使用 = 执行此操作，只能使用 @ 执行此操作。)

对于@，您将需要使用attr.$observe('title', function(value) { ... })如果您需要在链接(ing)函数中使用该值。例如，if(scope.title == "...")不会像你期望的那样工作。请注意，这意味着您只能访问此属性 asynchronously 。如果您仅使用模板中的值，则不需要使用 $observe()。例如，template: '<div>{{title}}</div>' .

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

Can I also access the parent scope directly, without decorating my element with an attribute?

是的，但前提是您不使用隔离范围。从指令中删除此行

scope: { ... }

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

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?

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

另请参阅

• Lukas's isolated scope blog post (涵盖@、=、&)
• dnc253's explanation @ 和=
• my blog-like answer关于作用域 - 指令部分(位于底部，就在摘要部分之前)有一张隔离作用域及其父作用域的图片 - 指令作用域使用 @ 表示一个属性，使用 = 表示另一个
• What is the difference between & vs @ and = in angularJS