=表示双向绑定，即父作用域的变量引用。这意味着，当你在指令中改变变量时，它也会在父作用域中被改变。

@意味着变量将被复制(克隆)到指令中。

据我所知，<pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>也应该工作。Bi-title将接收父范围变量值，该值可以在指令中更改。

如果你需要改变父作用域中的几个变量，你可以在指令内执行父作用域中的函数(或者通过服务传递数据)。

为什么我必须使用“{{title}}”与“@”和“title”与“=”?

@ binds a local/directive scope property to the evaluated value of the DOM attribute. If you use title=title1 or title="title1", the value of DOM attribute "title" is simply the string title1. If you use title="{{title}}", the value of the DOM attribute "title" is the interpolated value of {{title}}, hence the string will be whatever parent scope property "title" is currently set to. Since attribute values are always strings, you will always end up with a string value for this property in the directive's scope when using @.

=将局部/指令作用域属性绑定到父作用域属性。因此，使用=，您使用父模型/作用域属性名作为DOM属性的值。{{}}不能与=一起使用。

使用@，你可以这样做title="{{title}}，然后some"——{{title}}被插入，然后字符串"and them some"与它连接。最后一个串接的字符串是local/directive scope属性得到的。(你不能用=，只能用@。)

对于@，您将需要使用attr。$observe('title'，函数(值){…})如果你需要在你的link(ing)函数中使用该值。例如,如果范围。Title == "…")不会像你期望的那样工作。注意，这意味着您只能异步访问该属性。 如果只使用模板中的值，则不需要使用$observe()。例如，模板:'<div>{{title}}</div>'。

使用=，您不需要使用$observe。

我也可以直接访问父范围，而不装饰我的元素与属性?

是的，但前提是你不使用孤立的作用域。从指令中删除这一行

范围:{…｝

然后你的指令不会创建一个新的作用域。它将使用父作用域。然后，您可以直接访问所有父范围属性。

文档中说:“通常情况下，通过表达式将数据从孤立的作用域传递到父作用域是可取的”，但这似乎也适用于双向绑定。为什么表达式路由会更好呢?

是的，双向绑定允许本地/指令作用域和父作用域共享数据。“表达式绑定”允许指令调用由DOM属性定义的表达式(或函数)——您还可以将数据作为参数传递给表达式或函数。因此，如果您不需要与父对象共享数据——您只想调用父对象作用域中定义的函数——您可以使用&语法。

另请参阅

Lukas的孤立范围博客文章(涵盖@，=，&) Dnc253对@和=的解释 我关于作用域的博客般的回答——指令部分(在底部，就在摘要部分之前)有一个孤立作用域和它的父作用域的图片——指令作用域使用@表示一个属性，使用=表示另一个属性 在angularJS中& vs @和=的区别是什么

即使作用域是本地的，就像在您的例子中，您也可以通过属性$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周期上运行，这是不好的，因为记录会立即被删除，并且永远不会呈现。

如果您想通过一个现场示例了解更多这是如何工作的。http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

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

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

@ 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'})

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

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

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

@字符串 =模型 &方法

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

＝ @ ＆

有三种方法可以在指令中添加scope:

父作用域:这是默认的作用域继承。

指令和它的父(它所在的控制器/指令)作用域是相同的。 因此，对指令内的作用域变量所做的任何更改也会反映在父控制器中。您不需要指定它，因为它是默认值。

子作用域:如果指定该指令的作用域变量为true，则该指令将创建一个继承自父作用域的子作用域。

这里，如果你在指令中改变了作用域变量，它不会反映在父作用域中，但是如果你改变了一个作用域变量的属性，它会反映在父作用域中，因为你实际上修改了父作用域变量。

的例子,

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});

隔离作用域:当您想要创建不继承于控制器作用域的作用域时使用。

这发生在你创建插件时，因为这使得指令通用，因为它可以放在任何HTML中，不受其父作用域的影响。

现在，如果你不想与父作用域有任何交互，那么你可以将作用域指定为一个空对象。就像,

scope: {} //this does not interact with the parent scope in any way

大多数情况下，情况并非如此，因为我们需要与父作用域进行交互，因此我们希望传递一些值/更改。 为此，我们使用:

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@意味着控制器作用域的变化将反映在指令作用域中，但如果你在指令作用域中修改值，控制器作用域变量将不受影响。

@总是期望映射的属性是一个表达式。这一点非常重要;因为要使“@”前缀起作用，我们需要将属性值包装在{{}}中。

=是双向的，所以如果你改变指令作用域中的变量，控制器作用域变量也会受到影响

&用于绑定控制器作用域方法，以便在需要时从指令中调用它

这里的优点是变量的名称在控制器作用域和指令作用域中不需要相同。

例如，指令作用域有一个变量“dirVar”，它与控制器作用域的变量“contVar”同步。这为该指令提供了强大的功能和通用性，因为一个控制器可以与变量v1同步，而使用相同指令的另一个控制器可以要求dirVar与变量v2同步。

下面是用法示例:

指令和控制器分别是:

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

html(注意@和=的区别):

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

这里有一个博客的链接，很好地描述了它。

@ get作为字符串

这不会创建任何绑定。您只是获得作为字符串传入的单词

=双向绑定

控制器所做的更改将反映在指令所持有的引用中，反之亦然

&这个行为有点不同，因为作用域得到一个函数，返回传入的对象。我想这是成功的必要条件。小提琴应该能说明这一点。

调用此getter函数后，结果对象的行为如下: 如果传递了一个函数:那么该函数在父(控制器)闭包中被调用时执行 如果传入了一个非函数:简单地获取一个没有绑定的对象的本地副本

这把小提琴应该能演示它们是如何工作的。特别注意使用get…希望能更好地理解我所说的&

我创建了一个小的HTML文件，里面有Angular代码来演示它们之间的区别:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

我一次性实现了所有可能的选项。

它处理所有的选项:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

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

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

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

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

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

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

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

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

我们可以简单地使用:-

@:-用于单向数据绑定的字符串值。在一种方式中，数据绑定只能将作用域值传递给指令 =:- for对象值用于双向数据绑定。数据绑定有两种方式，你可以在指令和HTML中改变作用域值。 &:-用于方法和函数。

EDIT

在Angular 1.5及以上版本的组件定义中 有四种不同类型的绑定:

=双向数据绑定:-如果我们改变了值，它会自动更新 <单向绑定:-当我们只想从父作用域读取参数而不更新它时。 @这是字符串参数 &这是为了回调，以防你的组件需要输出一些东西到它的父作用域

@ and =见其他答案。

一个人抓住了你& TL,博士; &从父函数中获取表达式(不仅仅是其他答案中的例子中的函数)，并将其设置为指令中的函数，该函数调用表达式。这个函数能够替换表达式的任何变量(甚至函数名)，通过将变量传递给一个对象。

explained & is an expression reference, that means if you pass something like <myDirective expr="x==y"></myDirective> in the directive this expr will be a function, that calls the expression, like: function expr(){return x == y}. so in directive's html <button ng-click="expr()"></button> will call the expression. In js of the directive just $scope.expr() will call the expression too. The expression will be called with $scope.x and $scope.y of the parent. You have the ability to override the parameters! If you set them by call, e.g. <button ng-click="expr({x:5})"></button> then the expression will be called with your parameter x and parent's parameter y. You can override both. Now you know, why <button ng-click="functionFromParent({x:5})"></button> works. Because it just calls the expression of parent (e.g. <myDirective functionFromParent="function1(x)"></myDirective>) and replaces possible values with your specified parameters, in this case x. it could be: <myDirective functionFromParent="function1(x) + 5"></myDirective> or <myDirective functionFromParent="function1(x) + z"></myDirective> with child call: <button ng-click="functionFromParent({x:5, z: 4})"></button>. or even with function replacement: <button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>.

它只是一个表达式，不管它是一个函数，还是多个函数，或者只是比较。你可以替换这个表达式中的任意变量。

例子: 指令模板vs调用代码: Parent已经定义了$scope。x, scope.y美元: parent template: <myDirective expr="x==y"></myDirective> <按钮ng-click = " expr ()></button>调用$scope.x==$scope.y <button ng-click="expr({x: 5})"></按钮>调用5 == $scope.y <button ng-click="expr({x:5, y:6})"></button>调用5 == 6

Parent已经定义了$scope。function1,美元范围。x, scope.y美元: : <myDirective expr="function1(x) + y"></myDirective>

<按钮ng-click = " expr ()></button>调用$scope.function1($scope.x) + $scope.y <button ng-click="expr({x: 5})"></button>调用$scope.function1(5) + $scope.y <button ng-click="expr({x:5, y:6})">调用$scope.function1(5) + 6 指令有$作用域。myFn作为函数: <button ng-click="expr({function1: myFn, x:5, y:6})"></button>调用$scope.myFn(5) + 6

为什么我必须使用“{{title}}”与“@”和“title”与“=”?

当你使用{{title}}时，只有父范围值将被传递给指令视图并计算。这仅限于一种方式，这意味着更改不会反映在父范围中。当你想要将在子指令中所做的更改反映到父作用域时，你也可以使用'='。这是双向的。

我也可以直接访问父范围，而不装饰我 元素的属性?

当指令中有scope属性(scope:{})时，你将不能再直接访问父作用域。但是仍然可以通过作用域访问它。美元的父母等等。如果从指令中删除作用域，则可以直接访问它。

文档中说:“通常需要从 隔离作用域通过表达式和父作用域”，但是 似乎工作与双向绑定也很好。为什么 表达路线更好吗?

这取决于上下文。如果你想调用带有数据的表达式或函数，你可以使用&，如果你想共享数据，你可以使用双向的方式使用'='

你可以在下面的链接中找到传递数据到指令的多种方式之间的差异:

AngularJS -隔离作用域- @ vs = vs &

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

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

他们之间的主要区别是

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

@将局部/指令作用域属性绑定到DOM属性的评估值。 =将局部/指令作用域属性绑定到父作用域属性。 & binding用于将方法传递到指令的作用域，以便在指令中调用它。

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

这个问题已经被折腾得够呛了，但我还是要分享一下，以防其他人也在纠结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会监视它，直到它发生变化，然后对子作用域中相应的属性进行一次性更新。

总结

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