一尘不染

AngularJS:指令范围内=&@之间的差异?

angularjs

在指令内部创建 隔离作用域 使我们可以将 外部作用域
映射到 内部作用域 。我们已经看到了六种映射到属性的不同方法:

  1. = attr
  2. &attr
  3. @attr
  4. =
  5. @

这些作用域映射选项分别做什么?


阅读 183

收藏
2020-07-04

共1个答案

一尘不染

这可能会造成混淆,但是希望有一个简单的示例可以阐明这一点。首先,让我们将模型绑定与行为分开。

这是一个小提琴,应该有助于将它们联系在一起: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);

2020-07-04