@ local scope属性用于访问在指令外部定义的字符串值。

在需要在外部作用域和指令的隔离作用域之间创建双向绑定的情况下，可以使用=字符。

& local作用域属性允许指令的使用者传入指令可以调用的函数。

请查看下面的链接，它会用例子让你清楚地理解。我发现它真的很有用，所以想分享它。

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

他们之间的主要区别是

@ Attribute string binding
= Two-way model binding
& Callback method binding

这里有很多很好的答案，但我想就@、=和&绑定之间的差异提供我的观点，这对我来说很有用。

这三种绑定都是通过元素属性将数据从你的父作用域传递到你指令的隔离作用域的方法:

@ binding is for passing strings. These strings support {{}} expressions for interpolated values. For example: . The interpolated expression is evaluated against directive's parent scope. = binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope. Changes to one model affects the other, and vice versa. & binding is for passing a method into your directive's scope so that it can be called within your directive. The method is pre-bound to the directive's parent scope, and supports arguments. For example if the method is hello(name) in parent scope, then in order to execute the method from inside your directive, you must call $scope.hello({name:'world'})

我发现通过一个更短的描述来参考作用域绑定更容易记住这些区别:

@属性字符串绑定 =双向模型绑定 &回调方法绑定

这些符号还可以更清楚地说明作用域变量在指令实现中的含义:

@字符串 =模型 &方法

按用处排序(至少对我来说):

＝ @ ＆

=方法是双向绑定，它允许你在指令中进行实时更改。当有人在指令外更改变量时，你将在指令内拥有更改的数据，但@ way不是双向绑定。它像文本一样工作。你绑定一次，你就只有它的值。

为了更清楚地理解它，你可以使用这篇很棒的文章:

AngularJS指令作用域'@'和'='

即使作用域是本地的，就像在您的例子中，您也可以通过属性$parent访问父作用域。假设在下面的代码中，标题是在父作用域上定义的。然后你可以通过$parent.title访问title:

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

但是，在大多数情况下，使用属性可以更好地获得相同的效果。

我发现“&”符号的一个例子是在ng-repeat中渲染特殊数据结构的指令中，它用于“通过表达式将数据从隔离作用域传递到父作用域”，很有用(并且不能使用双向数据绑定)。

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

渲染的一部分是删除按钮，这里通过&从外部作用域附加一个删除函数很有用。在渲染指令中，它是这样的

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

2-way数据绑定，即data =" ="不能被使用，因为delete函数会在每个$digest周期上运行，这是不好的，因为记录会立即被删除，并且永远不会呈现。

这个问题已经被折腾得够呛了，但我还是要分享一下，以防其他人也在纠结AngularJS作用域这个可怕的烂摊子。包括=，<，@，&和::。完整的报道可以在这里找到。

---

=建立双向绑定。更改父对象中的属性将导致子对象中的更改，反之亦然。

---

<建立单向绑定，父到子。更改父属性将导致子属性的更改，但更改子属性不会影响父属性。

---

@会将tag属性的字符串值赋给子属性。如果属性包含表达式，则每当表达式计算为不同的字符串时，子属性就会更新。例如:

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

在这里，子作用域中的description属性将是表达式“the movie title is {{$ctrl.movie.”的当前值。Title}}"，其中movie是父作用域中的对象。

---

&有点棘手，事实上似乎没有令人信服的理由去使用它。它允许您在父范围内计算表达式，用子范围内的变量替换参数。一个例子(砰):

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

给定parentVar=10，表达式parentFoo({myVar:5, myOtherVar:'xyz'})将计算为5 + 10 + 'xyz'，组件将呈现为:

<div>15xyz</div>

你什么时候想使用这个复杂的功能?&经常被人们用来将父作用域中的回调函数传递给子作用域。然而，在现实中，使用'<'来传递函数可以达到同样的效果，这更直接，并且避免了传递参数时笨拙的花括号语法({myVar:5, myOtherVar:'xyz'})。考虑:

使用&:

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

使用<:

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

---

注意，对象(和数组)是通过引用传递给子作用域的，而不是复制。这意味着即使它是单向绑定，您也在父作用域和子作用域中使用相同的对象。

---

要查看不同前缀的作用，请打开这个插件。

One-time binding(initialization) using ::

(官方文档) AngularJS的后续版本引入了一次性绑定的选项，其中子作用域属性只更新一次。这样就不需要监视父属性，从而提高了性能。语法与上面不同;要声明一个一次性绑定，在组件标记的表达式前面添加::::::

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

这将把tagline的值传播到子作用域，而不需要建立单向或双向绑定。注意:如果tagline最初在父作用域中未定义，angular会监视它，直到它发生变化，然后对子作用域中相应的属性进行一次性更新。

总结

下表显示了前缀是如何工作的，这取决于属性是对象、数组、字符串等。