242

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

4

6 回答 6

382

@允许将指令属性上定义的值传递给指令的隔离范围。该值可以是一个简单的字符串值 ( 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

于 2013-02-16T13:14:10.963 回答
110

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

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

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

指定scope: {...}定义一个isolatedScope. AnisolatedScope不从 继承属性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/。要说明的图像是：

在此处输入图像描述

@: 单向绑定

@只需将属性从parentScopeto传递给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，反之亦然。此规则适用于基元和对象。如果你把绑定类型改成parentObjbe =，你会发现可以修改的值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: ...。

参考：了解范围

于 2014-12-30T09:31:43.223 回答
24

不是我的小提琴，但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:'&'
        }
于 2013-02-16T07:49:49.120 回答
20

@ : 单向绑定

= : 双向绑定

& : 函数绑定

于 2017-09-03T09:53:48.860 回答
7

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>
于 2017-06-27T17:19:53.580 回答
5

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

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

于 2015-12-16T12:34:03.393 回答