AngularJS:指令范围中的=&@的区别?

前端之家收集整理的这篇文章主要介绍了AngularJS:指令范围中的=&@的区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?13个答案在指令中创建一个 isolate scope允许我们将外部范围映射到内部范围。我们已经看到了六种不同的方法来映射到attrbutes:

> = 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);

猜你在找的Angularjs相关文章