小编典典

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

angularjs

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

以下是一些相关的摘要:

  • HTML

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

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

我没有几件事:

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

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


阅读 416

收藏
2020-07-04

共1个答案

小编典典

为什么我必须在“ @ ”中使用“ {{title}}”,而在“ = ”中使用“ title” ?

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

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

使用@,您可以执行title="{{title}} and then some"-插入{{title}}的操作,然后将字符串“ and some
some”与其连接在一起。最终的串联字符串是local / directive范围属性所获得的。(您不能使用 = ,只能使用 @ 。)

随着 @ ,你将需要使用attr.$observe('title', function(value) { ... }),如果您需要在您的链接(荷兰国际集团)函数使用的值。例如,if(scope.title == "...")不会像您期望的那样工作。请注意,这意味着您只能
异步

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

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

我是否还可以直接访问父范围,而不用属性装饰元素?

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

scope: { ... }

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

该文档说:“通常希望通过表达式将数据从隔离的范围传递到父范围”,但这似乎也可以与双向绑定一起使用。为什么表达途径会更好?

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

2020-07-04