> = attr
>& attr
> @attr
> =
>&
> @
这些范围映射选项中的每一个都有什么作用?
这里是一个小提琴应该有助于把事情联系在一起:http://jsfiddle.net/jeremylikness/3pvte/
解释…如果你的指令看起来像这样:
<my-directive target="foo"/>
然后你有这些范围的可能性:
{ target : '=' }
这将绑定scope.target(指令)到$ scope.foo(外部范围)。这是因为=用于双向绑定,当您不指定任何内容时,它会自动将内部范围上的名称与指令上的属性名称相匹配。对scope.target的更改将更新$ scope.foo。
{ bar : '=target' }
这将绑定scope.bar到$ scope.foo。这是因为我们再次指定双向绑定,但告诉指令,属性“target”中的内容应该作为“bar”显示在内部作用域。对scope.bar的更改将更新$ scope.foo。
{ target : '@' }
这将把scope.target设置为“foo”,因为@表示“字面意思。对scope.target的更改不会传播到您的指令之外。
{ bar : '@target' }
这将把scope.bar设置为“foo”,因为@从目标属性获取它的值。对scope.bar的更改不会传播到您的指令之外。
现在让我们谈谈行为。让我们假设你的外部范围有这样:
$scope.foo = function(parm1,parm2) { console.log(parm1 + ": " + parm2); }
有几种方法可以访问此。如果您的HTML是:
<my-directive target='foo'>
然后
{ target : '=' }
将允许你从你的指令调用scope.target(1,2)。
一样,
{ bar : '=target' }
允许您从指令调用scope.bar(1,2)。
更常见的方法是将其建立为一种行为。从技术上讲,与符号在父级的上下文中评估表达式。这很重要。所以我可以:
<my-directive target="a+b" />
如果父作用域有$ scope.a = 1和$ scope.b = 2,那么在我的指令:
{ target: '&' }
我可以调用scope.target(),结果将是3.这很重要 – 绑定作为一个函数暴露给内部作用域,但指令可以绑定到一个表达式。
更常见的方法是:
<my-directive target="foo(val1,val2)">
然后你可以使用:
{ target: '&' }
并从指令调用:
scope.target({val1: 1,val2: 2});
这需要你传递的对象,将属性映射到计算表达式中的参数,然后调用行为,这种情况下调用$ scope.foo(1,2);
你也可以这样做:
<my-directive target="foo(1,val)"/>
这将锁定文字1的第一个参数,并从指令:
{ bar: '&target' }
然后:
scope.bar(5)
这将调用$ scope.foo(1,5);