AngularJS：中=放大器的差异; @指令中的范围是什么？ [英] AngularJS : Differences among = & @ in directive scope?

问题描述

创建 隔离范围 内部指令让我们映射的外部范围的到的内部范围的。我们已经看到六个不同的方式映射到attrbutes：

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:

1. =属性


2. ＆放大器; attr指示


3. @attr


4. =


5. ＆安培;


6. @

什么是每个这些范围映射选项吗？

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。这是因为，我们再次指明双向绑定，而是告诉大家，什么是属性目标应该出现在内部范围为棒的指令。更改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富，因为@的意思是把它从字面上。更改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富，因为@需要它从目标属性值。更改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.

更常用的方法是建立此作为行为。从技术上讲，符号计算在父上下文中的前pression。这一点很重要。所以，我可以有：

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。这是非常重要的。 - 结合公开为函数到内范围，而该指令可以结合一个前pression

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.

要做到这一点更常见的方式是：

A more common way to do this is:

<my-directive target="foo(val1,val2)"> 

然后你可以使用：

Then you can use:

{ target: '&' }

和从该指令称：

scope.target({val1: 1, val2: 2}); 

这需要你传递的对象，属性映射到评估前pression参数，然后调用的行为，这种情况下，调用$ 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屋！