angularjs指令中scope参数 true、false、{} 的区别详解
scope 有三个参数 true、false、{}
scope 默认是 false，当 scope设置为true时，会从父作用域继承并创建一个新的作用域对象，
按照true 、false的反向思维，我就理解为scope不设置，或者设置为false的时候，就不从父作用域继承（理解错误主要就是因为这句话）。
这里的不从父作用域继承可以分为两种情况
1、创建一个新的作用域对象，但不继承父作用域 （创建、不继承）
2、压根就不创建新的作用域对象，直接跟父作用域共享一个作用域，也就谈不到继承了。 （不创建、直接用、谈何继承）
弄清楚这个我就明白了，scope:false 和scope：true的本质区别是创不创建新的作用域对象，而不是继不继承的问题。
放几个例子，代码不多，直接写在一个里面了：
指令中的templateUrl共用一个模板：scopeTemplate.html
<p>我的名字是：{{ name }}</p> <!-- 常量 --> <p>我的年龄是：{{ age }}</p> <!-- 变量 --> <p><button ng-click="greeting()">称呼</button></p> <!-- 方法 --> <input type="text" ng-model="name" /> <br /><br />
scope:false (跟父作用域共享一个作用域的时候)
<!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <div ng-controller="myController"> <p>我的名字是：{{ name }}</p> <!-- 常量 --> <p>我的年龄是：{{ age }}</p> <!-- 变量 --> <p><button ng-click="greeting()">称呼</button></p> <!-- 方法 --> <input type="text" ng-model="name" /> <br /><br /> <p>指令1 scope=false：</p> <div my-directive></div> </div> </body> <script type="text/javascript"> var app = angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.name = "wanglehui"; $scope.age = 23; $scope.greeting = function(){ alert('我叫'+$scope.name); } }]) /* 指令2 scope==false */ app.directive('myDirective',[function(){ return{ restrict:'AE', scope:false, templateUrl:'scopeTemplate.html' } }]) </script> </html>
测试的时候注意angularjs的版本问题。
这个很容易理解，两个同时改变，因为用的是同一个作用域，用的是同一个变量。
scope:true (从父作用域继承并创建一个新的作用域对象)
<!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <div ng-controller="myController"> <p>我的名字是：{{ name }}</p> <!-- 常量 --> <p>我的年龄是：{{ age }}</p> <!-- 变量 --> <p><button ng-click="greeting()">称呼</button></p> <!-- 方法 --> <input type="text" ng-model="name" /> <br /><br /> <p>指令1 scope=true：</p> <div my-directive></div> </div> </body> <script type="text/javascript"> var app = angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.name = "wanglehui"; $scope.age = 23; $scope.greeting = function(){ alert('我叫'+$scope.name); } }]) /* 指令2 scope==true */ app.directive('myDirective',[function(){ return{ restrict:'AE', scope:true, templateUrl:'scopeTemplate.html' } }]) </script> </html>
这块有一点需要注意下，
刷新——>输入第一个，第二个会跟着变——>输入第二个，第一个不变——>再输入第一个，第二个也不变了（之后两个互不影响）
刷新——>输入第二个，第一个不变——>输入第一个，第二个不变（之后两个互不影响）
也就是说，如果我们不在第二个输入框输入，也就不会在指令新建的作用域对象中创建新的变量，它每次显示的就是在父作用域中查询到的值
一旦输入，就已经在该对象下新建了一个变量。（这块跟js变量作用域的查找是一样的）
再看第三个 scope：{}
书上说这块叫隔离作用域，隔离.....也就是我是一个新的个体，跟外界没关系
前面说 scope:false 和scope：true的 本质区别是创不创建新的作用域对象，而不是继不继承的问题。
那么这里scope：{}和scope：true的 本质区别是继不继承父作用域的问题，而不是创不创建新的作用域对象的问题。
scope:{} (创建一个新的作用域对象，但不继承父作用域)
<!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <div ng-controller="myController"> <p>我的名字是：{{ name }}</p> <!-- 常量 --> <p>我的年龄是：{{ age }}</p> <!-- 变量 --> <p><button ng-click="greeting()">称呼</button></p> <!-- 方法 --> <input type="text" ng-model="name" /> <br /><br /> <p>指令 scope={}：</p> <div my-directive></div> </div> </body> <script type="text/javascript"> var app = angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.name = "wanglehui"; $scope.age = 23; $scope.greeting = function(){ alert('我叫'+$scope.name); } }]) /* 指令2 scope==true */ app.directive('myDirective',[function(){ return{ restrict:'AE', scope:{}, templateUrl:'scopeTemplate.html' } }]) </script> </html>
如果想要scope{}中的变量与父作用域绑定, 就会用到angularjs中的绑定策略“@”，“=”，“&”
