AngularJS:= & 之间的差异@ 在指令范围内? [英] AngularJS : Differences among = & @ in directive scope?
问题描述
在指令内创建一个隔离作用域让我们可以映射外部作用域 到内部作用域.我们已经看到了六种不同的映射到属性的方法:
Creating an isolate scope inside a directive lets us map the outer scope to the inner scope. We have seen six different ways to map to attrbutes:
- =属性
- &attr
- @attr
- =
- &
- @
这些范围映射选项的作用是什么?
What do each of these scope mapping options do?
推荐答案
这可能会令人困惑，但希望一个简单的例子可以澄清它.首先，让我们将模型绑定与行为分开.
This can be confusing but hopefully a simple example will clarify it. First, let's separate model bindings from behaviors.
这是一个有助于将事情联系在一起的小提琴:http://jsfiddle.net/jeremylikness/3pvte/
Here is a fiddle that should help tie things together: http://jsfiddle.net/jeremylikness/3pvte/
并解释......如果你的指令看起来像这样:
And explained ... if your directive looks like this:
<my-directive target="foo"/>
然后你有这些范围的可能性:
Then you have these possibilities for scope:
{ target : '=' }
这会将 scope.target(指令)绑定到 $scope.foo(外部作用域).这是因为 = 用于双向绑定，当您不指定任何内容时，它会自动将内部作用域上的名称与指令上的属性名称进行匹配.对 scope.target 的更改将更新 $scope.foo.
This will bind scope.target (directive) to $scope.foo (outer scope). This is because = is for two-way binding and when you don't specify anything, it automatically matches the name on the inner scope to the name of the attribute on the directive. Changes to scope.target will update $scope.foo.
{ bar : '=target' }
这会将 scope.bar 绑定到 $scope.foo.这是因为我们再次指定了双向绑定，但告诉指令属性target"中的内容应该在内部作用域中显示为bar".对 scope.bar 的更改将更新 $scope.foo.
This will bind scope.bar to $scope.foo. This is because again we specify two-way binding, but tell the directive that what is in the attribute "target" should appear on the inner scope as "bar". Changes to scope.bar will update $scope.foo.
{ target : '@' }
这会将 scope.target 设置为foo"，因为 @ 的意思是按字面意思理解".对 scope.target 的更改不会传播到您的指令之外.
This will set scope.target to "foo" because @ means "take it literally." Changes to scope.target won't propagate outside of your directive.
{ bar : '@target' }
这会将 scope.bar 设置为 "foo" 因为 @ 从目标属性中获取它的值.对 scope.bar 的更改不会传播到您的指令之外.
This will set scope.bar to "foo" because @ takes it's value from the target attribute. Changes to scope.bar won't propagate outside of your directive.
现在让我们谈谈行为.让我们假设你的外部作用域有这个:
Now let's talk behaviors. Let's assume your outer scope has this:
$scope.foo = function(parm1, parm2) { console.log(parm1 + ": " + parm2); }
您可以通过多种方式访问它.如果您的 HTML 是:
There are several ways you can access this. If your HTML is:
<my-directive target='foo'>
然后
{ target : '=' }
将允许您从指令中调用 scope.target(1,2).
Will allow you to call scope.target(1,2) from your directive.
同样的事情，
{ bar : '=target' }
允许您从指令中调用 scope.bar(1,2).
Allows you to call scope.bar(1,2) from your directive.
更常见的方法是将此作为一种行为.从技术上讲，与号在父级上下文中计算表达式.这很重要.所以我可以有:
The more common way is to establish this as a behavior. Technically, ampersand evaluates an expression in the context of the parent. That's important. So I could have:
<my-directive target="a+b" />
如果父作用域有 $scope.a = 1 和 $scope.b = 2，那么在我的指令上:
And if the parent scope has $scope.a = 1 and $scope.b = 2, then on my directive:
{ target: '&' }
我可以调用 scope.target() 并且结果将是 3.这很重要 - 绑定作为函数公开给内部作用域，但指令可以绑定到表达式.
I can call scope.target() and the result will be 3. This is important - the binding is exposed as a function to the inner scope but the directive can bind to an expression.
更常见的方法是:
<my-directive target="foo(val1,val2)">
然后你可以使用:
{ target: '&' }
并从指令调用:
scope.target({val1: 1, val2: 2});
这需要您传递的对象，将属性映射到计算表达式中的参数，然后调用行为，本例调用 $scope.foo(1,2);
This takes the object you passed, maps the properties to parameters in the evaluated expression and then calls the behavior, this case calling $scope.foo(1,2);
你也可以这样做:
<my-directive target="foo(1, val)"/>
这将第一个参数锁定到文字 1 和指令中:
This locks in the first parameter to the literal 1, and from the directive:
{ bar: '&target' }
那么:
scope.bar(5)
哪个会调用 $scope.foo(1,5);
Which would call $scope.foo(1,5);
这篇关于AngularJS:= & 之间的差异@ 在指令范围内?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
