AngularJS：=&@在指令作用域中的区别？
在指令中创建可以让我们将外部作用域映射到内部作用域。我们已经看到了六种不同的映射到attrbutes的方法：
- =attr
- &attr
- @attr
- =
- &
- @
这些作用域映射选项都有什么作用？
回答 2
Stack Overflow用户
发布于 2014-02-12 06:58:19
这可能会令人困惑，但希望一个简单的例子可以澄清这一点。首先，让我们将模型绑定与行为分开。
这里有一把小提琴，可以帮助把事情联系在一起：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)；
Stack Overflow用户
发布于 2014-02-12 06:17:42
摘要
- @attr绑定到匹配DOM属性的作用域value.
- =attr绑定到匹配DOM属性的作用域property.
- &attr绑定到匹配DOM属性的作用域function.
- @
- =
- &
的字符串
如果目标DOM属性的名称与作用域属性名称匹配，则使用4、5和6 DOM。以下是以下示例的工作。
Html
<div ng-app='isolate'>
<h3>Outer Scope</h3>
<input type="text" ng-model="myModel" />
<p>msg: {{ msg }}</p>
<h3>Inner Scope</h3>
<div id="inner">
<div my-directive at="{{ myModel }}" equals="myModel" ampersand="msg=msg+'click'"></div>
</div>
</div>Javascript
angular.module('isolate', [])
.directive('myDirective', function () {
return {
template:
'<label>@attr</label><input value="{{ myAt }}" />' +
'<label>@</label><input value="{{ at }}" />' +
'<label>=attr</label><input ng-model="myEquals" />' +
'<label>=</label><input ng-model="equals" />' +
'<label>&attr</label><input type="button" ng-click="myAmpersand()" value="Btn" />' +
'<label>&</label><input type="button" ng-click="ampersand()" value="Btn" />',
scope: {
myAt: '@at',
myEquals: '=equals',
myAmpersand: '&ersand',
at: '@',
equals: '=',
ampersand: '&'
}
};
});https://stackoverflow.com/questions/21712147
复制相似问题