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

@允许在指令属性上定义的值被传递到指令的隔离作用域。该值可以是一个简单的字符串值(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: Angular的默认值。该指令的作用域就是它的父作用域(parentScope)。
2. scope: true: Angular为这个指令创建了一个作用域。作用域原型继承自parentScope。
3. scope: {...}:孤立作用域解释如下。

指定scope: {...}定义了一个isolatedScope。isolatedScope不继承parentScope的属性，尽管isolatedScope.$parent === parentScope. c。它的定义是:

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

isolatedScope不能直接访问parentScope。但有时该指令需要与parentScope。它们通过@， =和&进行通信。parentScope0。

它通常用于不同页面共享的一些公共组件，如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} < / p >

=:双向绑定

=被称为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://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes

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>

@:单向绑定

＝:双向绑定

,:函数绑定