我已经仔细阅读了AngularJS关于这个主题的文档，然后摆弄了一个指令。这是小提琴。
以下是一些相关片段:
来自HTML: <窗格bi-title = "标题" title =“{{标题}}>{{文本}}> < /窗格 从窗格指令: scope: {biTitle: '='， title: '@'， bar: '='}，
有几件事我不明白:
为什么我必须使用“{{title}}”与“@”和“title”与“=”? 我也可以直接访问父范围，而不装饰我的元素与属性? 文档说:“通常情况下，通过表达式将数据从孤立的作用域传递到父作用域是可取的”，但这似乎也适用于双向绑定。为什么表达式路由会更好呢?
我发现另一个小提琴，显示表达式解决方案太:http://jsfiddle.net/maxisam/QrCXh/
当前回答
@ local scope属性用于访问在指令外部定义的字符串值。
在需要在外部作用域和指令的隔离作用域之间创建双向绑定的情况下，可以使用=字符。
& local作用域属性允许指令的使用者传入指令可以调用的函数。
请查看下面的链接，它会用例子让你清楚地理解。我发现它真的很有用，所以想分享它。
http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope
其他回答
我创建了一个小的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>
=方法是双向绑定，它允许你在指令中进行实时更改。当有人在指令外更改变量时，你将在指令内拥有更改的数据，但@ way不是双向绑定。它像文本一样工作。你绑定一次，你就只有它的值。
为了更清楚地理解它，你可以使用这篇很棒的文章:
AngularJS指令作用域'@'和'='
有三种方法可以在指令中添加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>
这里有一个博客的链接，很好地描述了它。
我一次性实现了所有可能的选项。
它处理所有的选项:
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'})
我发现通过一个更短的描述来参考作用域绑定更容易记住这些区别:
@属性字符串绑定 =双向模型绑定 &回调方法绑定
这些符号还可以更清楚地说明作用域变量在指令实现中的含义:
@字符串 =模型 &方法
按用处排序(至少对我来说):
＝ @ ＆
