一、概念說明
可以是true、 false 、哈希對象 {}
1、true
新創建了一個作用域，且繼承了父作用域；在初始化的時候，用了父作用域的屬性和方法去填充我們這個新的作用域。它和父作用域不是同一個作用域。
2、false 默認（不指定時候 ）
創建的指令和父作用域（其實是同一個作用域）共享同一個model模型，在指令中修改模型數據，會反映到父作用域的模型中。
3、{}
新創建了一個作用域，不繼承繼承了父作用域。表示一個獨立的作用域 isolated
例子：
scope :
{
name:'@',//結果就是test
detail:'=', //結果要通過$scope.detail計算
onUpdate:'&'//綁定一個事件
}
<user-details name ='test' detail='detail', on-update='updateIt(times)'></user-details>
二、例子
1、scope: false（或不寫即默認false）
不產生新作用域，指令的作用域和父作用域是同一個對象
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="MyController"> <my-directive></my-directive> <my-directive></my-directive> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule .controller('MyController', function($scope){ $scope.name = '2222'; }) .directive("myDirective",function(){ return { restrict:'AE', scope: false,//或不寫即默認false,指令的作用域和父作用域是同一個對象 template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>' }; }); </script> </body> </html>
運行結果 ：
分析：一個輸入改變，四個位置的內容一起改變。
作用域分析：ng-app產生rootScope,ng-controller指令產生一個作用域scope,兩個指令myDirective，由於scope: false（或不寫即默認false）,指令的作用域和父作用域是同一個對象。一共4個作用域。
所以，name在一個地方變了，就所有地方變。
2、scope: true
產生新作用域，而且繼承父作用域屬性和方法。兩個指令作用域互相對立，而且都繼承自父作用域（ng-controller產生）。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="MyController"> <my-directive></my-directive> <my-directive></my-directive> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule .controller('MyController', function($scope){ $scope.name = '2222'; }) .directive("myDirective",function(){ return { restrict:'AE', scope: true, template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>' }; }); </script> </body> </html>
運行結果;
兩行數據立變化，即每個指令作用域互相獨立，且繼承父作用域。
3、scope: {}
產生獨立新作用域，而且父作用域無關。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="MyController"> <my-directive></my-directive> <my-directive></my-directive> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule .controller('MyController', function($scope){ $scope.name = '2222'; }) .directive("myDirective",function(){ return { restrict:'AE', scope: {}, template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>' }; }); </script> </body> </html>
運行結果，剛開始運行，都是空，因為，沒有繼承父作用域的name
輸入一個輸入框后，只跟指令內的作用域同步
輸入另一個，兩個指令間不互相影響
4、{}中的@
字符串綁定，即，把內容直接當做字符串輸出，但是{{str2}}（<my-directive content="{{str2}}"></my-directive>），還是會解析成字符串再輸出。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="MyController"> <my-directive content="test string"></my-directive> <my-directive content="{{str2}}"></my-directive> <my-directive content="test()"></my-directive> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule .controller('MyController', function($scope){ $scope.str1 = "hello"; $scope.str2 = "world"; $scope.str3 = "angular"; }) .directive("myDirective",function(){ return { restrict:'AE', scope: { content:'@' }, template:'<div>{{content}}</div>' }; }); </script> </body> </html>
運行結果：
第一個和第三個都是字符串原樣輸出，第二個會解析后輸出。
5、{}中=
變量綁定
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="MyController"> ctrl:<input type="text" ng-model="testname"><br> directive:<my-directive name="testname"></my-directive> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule .controller('MyController', function($scope){ $scope.testname="my name is hyx"; }) .directive("myDirective",function(){ return { restrict:'AE', scope:{ name:'=' }, template:'<input type="text" ng-model="name">', repalce:true }; }); </script> </body> </html>
解析過程：
（1 ）、在控制器MyController對應的div中，定義了一個變量ng-model —— testname。
（2）、 testname對應的是輸入框中輸入的值。
（3 ）、然后把這個變量當做一個參數傳遞給my-directive這個標簽的name屬性。
（4）、 在my-directive標簽中，又把這個name綁定到模板中的一個輸入框內。
最終兩個輸入框的內容被連接起來，無論改變哪一個輸入框內的值，testname與name都會發生改變。即通過my-directive標簽內的屬性依賴關系把 testname與name連接在一起，
6、{}中的&
方法綁定，當做方法執行，sayHello,sayNo,參數動態綁定到輸入框。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="MyController"> <my-directive say="sayHello(name)"></my-directive> <my-directive say="sayNo(name)"></my-directive> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule .controller('MyController', function($scope){ $scope.sayHello = function(name){ console.log("hello !"+ name); }; $scope.sayNo = function(name){ console.log("no !"+ name); }; }) .directive("myDirective",function(){ return { restrict:'AE', scope:{ say:'&' }, template:'<input type="text" ng-model="username"/><br>'+ '<button ng-click="say({name:username})">click</button><br>', repalce:true }; }); </script> </body> </html>
通過say在scope中的定義，angular知道了say對應的是個方法。
通過{name:username}的關聯，知道了傳入的是username。