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 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...