angularJS中& vs @和=有啥区别

Posted 2023-02-22

【中文标题】angularJS中& vs @和=有啥区别

【英文标题】：What is the difference between & vs @ and = in angularJSangularJS中& vs @和=有什么区别

【发布时间】：2013-02-01 05:18:06

【问题描述】：

我对 AngularJS 很陌生。谁能解释一下这些 AngularJS 运算符之间的区别：&, @ and = 在用适当的例子隔离范围时。

【问题讨论】：

另见***.com/questions/14050195/…

【参考方案1】：

@ 允许将指令属性上定义的值传递给指令的隔离范围。该值可以是一个简单的字符串值 (myattr="hello")，也可以是一个带有嵌入表达式的 AngularJS 插值字符串 (myattr="my_helloText")。将其视为从父范围到子指令的“单向”通信。 John Lindquist 有一系列简短的截屏视频来解释其中的每一个。 @ 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

& 允许指令的隔离范围将值传递到父范围，以便在属性中定义的表达式中进行评估。请注意，指令属性是隐式表达式，不使用双花括号表达式语法。这在文字中更难解释。 & 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

= 在指令的隔离范围和父范围之间设置双向绑定表达式。子范围中的更改会传播到父范围，反之亦然。将 = 视为 @ 和 & 的组合。 = 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

最后是一个截屏视频，在一个视图中显示了所有三个一起使用：https://egghead.io/lessons/angularjs-isolate-scope-review

【讨论】：

这些链接似乎已更改，它们现在分别为：egghead.io/lessons/angularjs-isolate-scope-attribute-binding、egghead.io/lessons/angularjs-isolate-scope-expression-binding、egghead.io/lessons/angularjs-isolate-scope-two-way-binding、egghead.io/lessons/angularjs-isolate-scope-review。

感谢您的关注，我用正确的 URL 更新了我的答案。

当可能有大量包含相同信息的免费内容时，评分最高的答案链接到付费墙后面的视频，这有点可惜。

有很多视频是egghead免费提供的:)

付费内容减一。

【参考方案2】：

我想从 javascript 原型继承的角度来解释这些概念。希望有助于理解。

有三个选项可以定义指令的范围：

scope: false：角度默认值。该指令的范围正是其父范围之一 (parentScope)。 scope: true：Angular 为这个指令创建了一个作用域。范围原型继承自 parentScope。 scope: ...：隔离范围解释如下。

指定scope: ... 定义isolatedScope。 isolatedScope 不继承 parentScope 的属性，尽管 isolatedScope.$parent === parentScope。它是通过以下方式定义的：

app.directive("myDirective", function() 
    return 
        scope: 
            ... // defining scope means that 'no inheritance from parent'.
        ,
    
)

isolatedScope 无法直接访问parentScope。但有时指令需要与parentScope 通信。他们通过@、= 和& 进行通信。 关于使用符号@、=和&的话题正在讨论使用isolatedScope的场景。

它通常用于不同页面共享的一些通用组件，例如Modal。隔离范围可防止污染全局范围，并且易于在页面之间共享。

这是一个基本指令：http://jsfiddle.net/7t984sf9/5/。要说明的图像是：

@: 单向绑定

@ 只是将属性从parentScope 传递给isolatedScope。它被称为one-way binding，这意味着您不能修改parentScope 属性的值。如果您熟悉 JavaScript 继承，您可以轻松理解这两种场景：

如果绑定属性是原始类型，例如示例中的interpolatedProp：您可以修改interpolatedProp，但不会更改parentProp1。但是，如果您更改 parentProp1 的值，interpolatedProp 将被新值覆盖（当 angular $digest 时）。

如果绑定属性是某个对象，比如parentObj：因为传递给isolatedScope的是一个引用，修改值会触发这个错误：

TypeError: Cannot assign to read only property 'x' of "x":1,"y":2

=: 双向绑定

=被称为two-way binding，这意味着childScope中的任何修改也会更新parentScope中的值，反之亦然。此规则适用于基元和对象。如果把parentObj的绑定类型改成=，你会发现可以修改parentObj.x的值。一个典型的例子是ngModel。

&: 函数绑定

& 允许指令调用一些parentScope 函数并从指令中传递一些值。例如，检查JSFiddle: & in directive scope。

在指令中定义一个可点击的模板，如：

<div ng-click="vm.onCheck(valueFromDirective: vm.value + ' is from the directive')">

并使用如下指令：

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

变量valueFromDirective通过valueFromDirective: ...从指令传递到父控制器。

参考：Understanding Scopes

【讨论】：

默认情况下，指令使用共享范围。如果指令具有“范围：true”，则它使用继承范围，其中子可以看到父属性但父不能看到子内部属性。

AngularJS – 独立作用域 – @ vs = vs & ---------- 简短的例子和解释可以在下面的链接中找到：codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs跨度>

【参考方案3】：

不是我的小提琴，但 http://jsfiddle.net/maxisam/QrCXh/ 显示了差异。关键是：

           scope:
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
                

【参考方案4】：

@：单向绑定

=：双向绑定

&：函数绑定

【讨论】：

对@的一个重要警告不仅是单向，而且是在路上的字符串

@Shawson：那么如何绑定单向非字符串（例如 int 或 bool）？

如果你愿意的话，你可以把@的值转换成一个int/bool？否则我只会使用 = 或

【参考方案5】：

AngularJS – 独立作用域 – @ vs = vs &

---

带有解释的简短示例可在以下链接中找到：

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ - 单向绑定

在指令中：

scope :  nameValue : "@name" 

在视图中：

<my-widget name="nameFromParentScope"></my-widget>

= – 双向绑定

在指令中：

scope :  nameValue : "=name" ,
link : function(scope) 
  scope.name = "Changing the value here will get reflected in parent scope value";

在视图中：

<my-widget name="nameFromParentScope"></my-widget>

& – 函数调用

在指令中：

scope :  nameChange : "&" 
link : function(scope) 
  scope.nameChange(newName:"NameFromIsolaltedScope");

在视图中：

<my-widget nameChange="onNameChange(newName)"></my-widget>

【参考方案6】：

我花了很长时间才真正掌握了这一点。我的关键是要理解“@”用于您想要在原地评估并作为常量传递到指令中的东西，其中“=”实际上传递了对象本身。

有一篇很好的博客文章解释了这一点：http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes