aangularjs指令的作用域，通過scope來實現，scope有三種情況的值：true、fasle、{}。預設值為true。其一、scope=false：和父級完全共用一個作用域；其二、scope=true： 創建了一個新的 作用域，初始化時繼承父作用域。 ...
您好，在前兩天對指令的簡單瞭解和系統指令學習後
今天主要研究其指針作用域的相關事情
每一個指令在創建時，其實就構成了自己的一個小的模塊單元。
其對於的模塊單元都有著其對於的作用域，其中作用域一般有兩種情況：
其一、繼承父級作用域；其二、自己完全獨立開闢一個新的作用域。
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="width: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="width: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="width: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>
