和＆amp;之间的区别是什么？ vs @和=在angularJS中

Question

我对AngularJS很新。任何人都可以解释这些AngularJS运算符之间的区别：&, @ and =在用适当的例子隔离范围时。{/ p>

Answer 1

@允许将指令属性上定义的值传递给指令的隔离范围。值可以是简单的字符串值（myattr="hello"），也可以是带有嵌入式表达式（myattr="my_{{helloText}}"）的AngularJS插值字符串。可以将其视为从父作用域到子指令的“单向”通信。 John Lindquist有一系列简短的截屏视频解释了每一个。关于@的截屏是：https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

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

=在指令的隔离范围和父范围之间建立双向绑定表达式。子范围的更改将传播到父级，反之亦然。想想=作为@和＆amp;的组合。 Screencast on =在这里：https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

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

Answer 2

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

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

1. scope: false：Angular默认值。该指令的范围正是其父范围（parentScope）。
2. scope: true：Angular为此指令创建了一个范围。范围原型继承自parentScope。
3. 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 的方案。

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

这是一个基本指令：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

Answer 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:'&'
        }        

Answer 4

@ ：单向绑定

= ：双向绑定

＆amp; ：功能绑定

Answer 5

我花了很长时间才真正掌握了这一点。对我而言，关键在于理解＆＃34; @＆＃34;是你希望在原地评估并作为常量传递到指令中的东西，其中＆＃34; =＆＃34;实际上传递了对象本身。

这是一篇不错的博文，可以在http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes

解释这一点

Answer 6

AngularJS - 隔离范围 - @ vs = vs＆amp;

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

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>