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

它处理所有的选项:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

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

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

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

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

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

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

@字符串 =模型 &方法

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

＝ @ ＆

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

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

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

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

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

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

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

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

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

我们可以简单地使用:-

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

EDIT

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

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

@ get作为字符串

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

=双向绑定

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

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

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

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

@ 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