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

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

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

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

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

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

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

为什么我必须使用“{{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 @和=的区别是什么

有三种方法可以在指令中添加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>

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

我们可以简单地使用:-

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

EDIT

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

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