小编典典

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

all

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

以下是一些相关的片段:

  • HTML

    <pane bi-title="title" title="{{title}}">{{text}}</pane>
    
  • 从窗格指令:

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

有几件事我没有得到:

  • 为什么我必须使用"{{title}}"with'@'"title"with '='
  • 我也可以直接访问父范围,而不用属性装饰我的元素吗?
  • 文档说 “通常希望通过表达式将数据从隔离范围传递到父范围” ,但这似乎也适用于双向绑定。为什么表达路线会更好?

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


阅读 122

收藏
2022-02-28

共1个答案

小编典典

为什么我必须使用带有’ @ ‘的“{{title}}”和带有’ = ‘的“title”?

@ 将本地/指令范围属性绑定到 DOM 属性的评估值 。如果使用title=title1or title="title1",则
DOM 属性 “title” 的值就是字符串title1。如果使用title="{{title}}",则 DOM 属性 “title” 的值是
的内插值{{title}},因此字符串将是当前设置的父范围属性 “title” 的任何值。 由于属性值始终是字符串,因此在使用@
时,您将始终在指令范围内得到此属性的字符串值。

= 将本地/指令范围属性绑定到 父范围属性 。因此,使用 = 时,您可以使用父模型/范围属性名称作为 DOM
属性的值。您不能将{{}}s 与 = 一起使用。

使用@,您可以执行以下操作title="{{title}} and then some"——{{title}} 被插值,然后将字符串“and them
some”与它连接起来。最终连接的字符串是本地/指令范围属性得到的。(你不能用 = 做到这一点,只有 @ 。)

使用 @attr.$observe('title', function(value) { ... })如果您需要在 link(ing)
函数中使用该值,则需要使用。例如,if(scope.title == "...")不会像您期望的那样工作。请注意,这意味着您只能
异步

访问此属性。如果您只使用模板中的值,则不需要使用 $observe()。例如,template: '<div>{{title}}</div>'

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

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

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

scope: { ... }

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

文档说“通常希望通过表达式将数据从隔离范围传递到父范围”,但这似乎也适用于双向绑定。为什么表达路线会更好?

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

2022-02-28