我已经仔细阅读了AngularJS关于这个主题的文档，然后摆弄了一个指令。这是小提琴。
以下是一些相关片段:
来自HTML: <窗格bi-title = "标题" title =“{{标题}}>{{文本}}> < /窗格 从窗格指令: scope: {biTitle: '='， title: '@'， bar: '='}，
有几件事我不明白:
为什么我必须使用“{{title}}”与“@”和“title”与“=”? 我也可以直接访问父范围，而不装饰我的元素与属性? 文档说:“通常情况下，通过表达式将数据从孤立的作用域传递到父作用域是可取的”，但这似乎也适用于双向绑定。为什么表达式路由会更好呢?
我发现另一个小提琴，显示表达式解决方案太:http://jsfiddle.net/maxisam/QrCXh/
当前回答
我一次性实现了所有可能的选项。
它处理所有的选项:
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
我创建了一个小的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:
父作用域:这是默认的作用域继承。
指令和它的父(它所在的控制器/指令)作用域是相同的。 因此，对指令内的作用域变量所做的任何更改也会反映在父控制器中。您不需要指定它，因为它是默认值。
子作用域:如果指定该指令的作用域变量为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
即使作用域是本地的，就像在您的例子中，您也可以通过属性$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周期上运行，这是不好的，因为记录会立即被删除，并且永远不会呈现。
