前言
AngularJS自帶指令目前有ng-include、ng-view、ng-switch、ng-repeat。這樣的原因是因?yàn)椋@些指令雖然是AngularJS內(nèi)部定義的，但是也是和directive實(shí)現(xiàn)的方法都是一樣的，其內(nèi)部使用的是scope:true的方式，子作用域繼承了父級(jí)的作用，并且構(gòu)建了一個(gè)獨(dú)立的子作用域，所有雙向綁定實(shí)現(xiàn)不了，只能單獨(dú)實(shí)現(xiàn)子級(jí)作用域繼承父級(jí)的屬性。
AngularJS的繼承是通過(guò)javascript的原型繼承方式實(shí)現(xiàn)的，進(jìn)行原型繼承即意味著父作用域在子作用域的原型鏈上。因?yàn)樵玩湹臋z索只會(huì)在屬性檢索的時(shí)候觸發(fā)，不會(huì)在改變屬性值的時(shí)候觸發(fā)。所以我們需要把原始類型轉(zhuǎn)換成對(duì)象，把值綁定在對(duì)象的屬性上。
大家可以在示例上看到，經(jīng)過(guò)改造之后，就可以實(shí)現(xiàn)子級(jí)修改父級(jí)作用域的屬性。原始類型只能繼承父類的作用域。
實(shí)現(xiàn)方法目前看有三種，下面一次來(lái)介紹
通過(guò)給父級(jí)scope上添加{}來(lái)實(shí)現(xiàn)，把原始類型轉(zhuǎn)換成對(duì)象。
代碼如下：
<!DOCTYPE html><html lang="en" ng-app="childScope"><head> <meta charset="UTF-8"> <title></title> <script src="lib/angular.min.js" type="text/javascript"></script> <style> .inputOne{ width: 100px; height: 50px; background: skyblue; } .inner{ border: 1px solid skyblue; width: 200px; height: 150px; } .outer{ border: 1px solid salmon; width: 200px; height: 150px; } .sco{ background: skyblue; } </style></head><body ng-controller="childCon"> <div class="inner"> <h3>父級(jí)作用域</h3> <span>{{vm.private1}}</span> <span>{{vm.private2}}</span> </div> <div class="outer"> <h3>自己作用域</h3> <div class="one" ng-include src="'one.html'"></div> <div class="two" ng-include src="'two.html'"></div> </div></body><script> var app=angular.module("childScope",['template']) .controller("childCon",["$scope", function ($scope) { var vm=$scope.vm={}; vm.private1=12; vm.private2=13; $scope.test=123; }]); var template=angular.module("template",[]) .run(["$templateCache", function ($templateCache) { $templateCache.put("one.html","" + "<div><input type='text' ng-model='vm.private1'/></div>") }]) .run(["$templateCache", function ($templateCache) { $templateCache.put("two.html","" + "<div><input type='text' ng-model='vm.private2'/>" + "<div class='sco'><span>原始類型</span>{{test}}</div>" + "</div>") }])</script></html>通過(guò)controller as語(yǔ)法來(lái)實(shí)現(xiàn)
controller as其實(shí)相當(dāng)于controller的示例對(duì)象，原理還是把原始類型轉(zhuǎn)換成對(duì)象類型。
<!DOCTYPE html><html lang="en" ng-app="childScope"><head> <meta charset="UTF-8"> <title></title> <script src="lib/angular.min.js" type="text/javascript"></script> <style> .inputOne{ width: 100px; height: 50px; background: skyblue; } .inner{ border: 1px solid skyblue; width: 200px; height: 150px; } .outer{ border: 1px solid salmon; width: 200px; height: 150px; } .sco{ background: skyblue; } </style></head><body ng-controller="childCon as vm"> <div class="inner"> <h3>父級(jí)作用域</h3> <span>{{vm.private1}}</span> <span>{{vm.private2}}</span> </div> <div class="outer"> <h3>自己作用域</h3> <div class="one" ng-include src="'one.html'"></div> <div class="two" ng-include src="'two.html'"></div> </div></body><script> var app=angular.module("childScope",['template']) .controller("childCon",["$scope", function ($scope) { this.private1=12; this.private2=22; $scope.test=123; }]); var template=angular.module("template",[]) .run(["$templateCache", function ($templateCache) { $templateCache.put("one.html","" + "<div><input type='text' ng-model='vm.private1'/></div>") }]) .run(["$templateCache", function ($templateCache) { $templateCache.put("two.html","" + "<div><input type='text' ng-model='vm.private2'/>" + "<div class='sco'><span>原始類型</span>{{test}}</div>" + "</div>") }])</script></html>使用$parent.name調(diào)用內(nèi)部方法來(lái)實(shí)現(xiàn)。
進(jìn)行原型繼承即意味著父作用域在子作用域的原型鏈上，這是JavaScript的特性。
AngularJS的作用域還存在如下內(nèi)部定義的關(guān)系：
scope.$parent指向scope的父作用域；
scope.$$childHead指向scope的第一個(gè)子作用域；
scope.$$childTail指向scope的最后一個(gè)子作用域；
scope.$$nextSibling指向scope的下一個(gè)相鄰作用域；
scope.$$prevSibling指向scope的上一個(gè)相鄰作用域；
通過(guò)在子級(jí)作用域中使用scope.$parent.name，來(lái)獲取對(duì)父級(jí)作用域的雙向綁定。
示例如下：
<!DOCTYPE html><html lang="en" ng-app="childScope"><head> <meta charset="UTF-8"> <title></title> <script src="lib/angular.min.js" type="text/javascript"></script> <style> .inputOne{ width: 100px; height: 50px; background: skyblue; } .inner{ border: 1px solid skyblue; width: 200px; height: 150px; } .outer{ border: 1px solid salmon; width: 200px; height: 150px; } .sco{ background: skyblue; } </style></head><body ng-controller="childCon"> <div class="inner"> <h3>父級(jí)作用域</h3> <span>{{private1}}</span> <span>{{private2}}</span> </div> <div class="outer"> <h3>自己作用域</h3> <div class="one" ng-include src="'one.html'"></div> <div class="two" ng-include src="'two.html'"></div> </div></body><script> var app=angular.module("childScope",['template']) .controller("childCon",["$scope", function ($scope) { $scope.private1=12; $scope.private2=22; $scope.test=123; }]); var template=angular.module("template",[]) .run(["$templateCache", function ($templateCache) { $templateCache.put("one.html","" + "<div><input type='text' ng-model='$parent.private1'/></div>") }]) .run(["$templateCache", function ($templateCache) { $templateCache.put("two.html","" + "<div><input type='text' ng-model='$parent.private2'/>" + "<div class='sco'><span>原始類型</span>{{test}}</div>" + "</div>") }])</script></html>總結(jié)
以上就是AngularJS子級(jí)作用域問(wèn)題的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)和工作能有所幫助。大家如果有什么疑問(wèn)，歡迎提出來(lái)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
