您好,在前两天对指令的简单了解和系统指令学习后
今天主要研究其指针作用域的相关事情
每一个指令在创建时,其实就构成了自己的一个小的模块单元。
其对于的模块单元都有着其对于的作用域,其中作用域一般有两种情况:
其一、继承父级作用域;其二、自己完全独立开辟一个新的作用域。
angularjs其作用域通过scope来实现,其取值有三种情况:true、false、{}
其默认值是false:学习也就针对这3种情况进行研究
其一、scope=false
和父级完全共用一个作用域
其二、scope=true
创建了一个新的 作用域,初始化时继承父作用域
表现形式:当子作用域属性值不改变一直使用父作用域对应的属性值
一旦子作用域的属性值发生改变,就在受父作用域影响
但是:这一切的前提是:数值是值类型(字符串、布尔、数值)
也就是说:当数值为应用类型(obj)时其实和
为了直观的体现两种的差异,下面进行一个练习:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> 父(字符串):{{message}}<br /> <input type="text" ng-model="message" /><br /> 名字(对象):<input type="text" ng-model="user.name" /><br /> <div style="auto;border-bottom:2px solid #000000"> <h4>scope=true:创建了一个新的 作用域,初始化时继承父作用域</h4> </div> <div my-direct> 孩(字符串):{{message}}<br /> <input type="text" ng-model="message" /><br /> 名字(对象):<input type="text" ng-model="user.name" /><br /> </div> <div style="auto;border-bottom:2px solid #000000"> <h4>scope=false:和父级完全共用一个作用域</h4> </div> <div my-direct> 孩(字符串):{{message}}<br /> <input type="text" ng-model="message" /><br /> 名字(对象):<input type="text" ng-model="user.name" /><br /> </div> <div style="auto;border-bottom:2px solid #000000"> </div> <h4>小结</h4> scope=true:创建了一个新的 作用域,初始化时继承父作用域<br /> <div style="margin-left:100px;"> 表现形式:当子作用域属性值不改变一直使用父作用域对应的属性值<br /> 一旦子作用域的属性值发生改变,就在受父作用域影响<br /> 但是:这一切的前提是:数值是值类型(字符串、布尔、数值)<br /> 也就是说:当数值为应用类型(obj)时其实和<br /> </div> scope=false:和父级完全共用一个作用域<br /> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope) { $scope.message = "im father message"; $scope.user = { name: "father" } }); app.directive("myDirect", function () { return { restrict: "A", replace: true, scope: true }; }); app.directive("myDirect2", function () { return { restrict: "A", replace: true, scope: false }; }); </script>