AngularJS：= 和 @ 在指令范围内的区别？ [复制]

Posted 2023-02-19

【中文标题】AngularJS：= 和 @ 在指令范围内的区别？ [复制]

【英文标题】：AngularJS : Differences among = & @ in directive scope? [duplicate]

【发布时间】：2014-03-09 20:19:18

【问题描述】：

在指令中创建 isolate scope 可以让我们将外部范围映射到内部范围。我们已经看到了六种不同的方式来映射到属性：

=属性 &attr @attr = & @

这些范围映射选项的作用是什么？

【问题讨论】：

@karaxuna 另一个问题确实有帮助。不过，它不包括 $attr 绑定。

= 与=attr 相同 例如：scope: smth: '=' 与scope: smth: '=smth' 相同

***.com/questions/12371159/… 也很有帮助。

另见官方文档，位于docs.angularjs.org/api/ng/service/$compile#-scope-（“指令定义对象”的文档隐藏在$compile的文档中）

【参考方案1】：

总结

@attr 绑定到匹配的 DOM 属性的评估 string 值。 =attr 绑定到匹配的 DOM 属性的范围 property。 &attr 绑定到匹配的 DOM 属性的范围 function。 @ = &

如果目标 DOM 属性的名称与隔离范围属性名称匹配，我们使用 4、5 和 6。这是以下示例的工作 fiddle。

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: '&ampersand',
            at: '@',
            equals: '=',
            ampersand: '&'
        
    ;
);

【讨论】：

@ 是一个文字。 & 是一种行为，作为函数公开，但可以在指令上设置为表达式。

好吧，我没有意识到我不能“推翻反对票”，但我赞成修复编辑。

为什么 Angular 文档中没有这个？

【参考方案2】：

这可能会让人感到困惑，但希望一个简单的例子可以澄清它。首先，让我们将模型绑定与行为分开。

这是一个有助于将事情联系在一起的小提琴：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);

【讨论】：

感谢您的清晰解释。特别有用的是绑定和行为之间的区别。

非常好的例子，但 scope.call(...) 对我来说有点混乱，因为 call 是全局 javascript 函数，起初我以为你试图将范围用作函数