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

我想从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.

它通常用于不同页面共享的一些公共组件，例如 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: & 在指令范围内。

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

<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: ....

参考：了解作用域

不是我的小提琴，但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:'&'
        }        

@：单向绑定

= : 双向绑定

& : 函数绑定

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>