我已经仔细阅读了有关该主题的 AngularJS 文档,然后摆弄了一个指令。这是小提琴。
以下是一些相关的片段:
从 HTML :
<pane bi-title="title" title="{{title}}">{{text}}</pane>
从窗格指令:
scope: { biTitle: '=', title: '@', bar: '=' },
有几件事我没有得到:
"{{title}}"
'@'
"title"
'='
我发现了另一个显示表达式解决方案的小提琴:http: //jsfiddle.net/maxisam/QrCXh/
为什么我必须使用带有’ @ ‘的“{{title}}”和带有’ = ‘的“title”?
@ 将本地/指令范围属性绑定到 DOM 属性的评估值 。如果使用title=title1or title="title1",则 DOM 属性 “title” 的值就是字符串title1。如果使用title="{{title}}",则 DOM 属性 “title” 的值是 的内插值{{title}},因此字符串将是当前设置的父范围属性 “title” 的任何值。 由于属性值始终是字符串,因此在使用@ 时,您将始终在指令范围内得到此属性的字符串值。
title=title1
title="title1"
title1
title="{{title}}"
{{title}}
= 将本地/指令范围属性绑定到 父范围属性 。因此,使用 = 时,您可以使用父模型/范围属性名称作为 DOM 属性的值。您不能将{{}}s 与 = 一起使用。
{{}}
使用@,您可以执行以下操作title="{{title}} and then some"——{{title}} 被插值,然后将字符串“and them some”与它连接起来。最终连接的字符串是本地/指令范围属性得到的。(你不能用 = 做到这一点,只有 @ 。)
title="{{title}} and then some"
使用 @ ,attr.$observe('title', function(value) { ... })如果您需要在 link(ing) 函数中使用该值,则需要使用。例如,if(scope.title == "...")不会像您期望的那样工作。请注意,这意味着您只能 异步 访问此属性。如果您只使用模板中的值,则不需要使用 $observe()。例如,template: '<div>{{title}}</div>'。
attr.$observe('title', function(value) { ... })
if(scope.title == "...")
template: '<div>{{title}}</div>'
使用 = ,您不需要使用 $observe。
我也可以直接访问父范围,而不用属性装饰我的元素吗?
是的,但前提是您不使用隔离范围。从您的指令中删除此行
scope: { ... }
然后您的指令将不会创建新范围。它将使用父范围。然后,您可以直接访问所有父范围属性。
文档说“通常希望通过表达式将数据从隔离范围传递到父范围”,但这似乎也适用于双向绑定。为什么表达路线会更好?
是的,双向绑定允许本地/指令范围和父范围共享数据。“表达式绑定”允许指令调用由 DOM 属性定义的表达式(或函数)——您还可以将数据作为参数传递给表达式或函数。因此,如果您不需要与父级共享数据——您只想调用在父级范围内定义的函数——您可以使用 & 语法。