前言
AngularJS內建指令目前有ng-include、ng-view、ng-switch、ng-repeat。這樣的原因是因為，這些指令雖然是AngularJS內部定義的，但是也是和directive實現的方法都是一樣的，其內部使用的是scope:true的方式，子範圍繼承了父級的作用，並且構建了一個獨立的子範圍，所有雙向繫結實現不了，只能單獨實現子級範圍繼承父級的屬性。
AngularJS的繼承是通過javascript的原型繼承方式實現的，進行原型繼承即意味著父範圍在子範圍的原型鏈上。因為原型鏈的檢索只會在屬性檢索的時候觸發，不會在改變屬性值的時候觸發。所以我們需要把原始類型轉換成對象，把值綁定在對象的屬性上。
大家可以在樣本上看到，經過改造之後，就可以實現子級修改父級範圍的屬性。原始類型只能繼承父類的範圍。
實現方法目前看有三種，下面一次來介紹
通過給父級scope上添加{}來實現，把原始類型轉換成對象。
代碼如下：
<!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>父級範圍</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>
通過controller as文法來實現
controller as其實相當於controller的樣本對象，原理還是把原始類型轉換成物件類型。
<!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>父級範圍</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調用內部方法來實現。
進行原型繼承即意味著父範圍在子範圍的原型鏈上，這是JavaScript的特性。
AngularJS的範圍還存在如下內部定義的關係：
scope.$parent指向scope的父範圍；
scope.$$childHead指向scope的第一個子範圍；
scope.$$childTail指向scope的最後一個子範圍；
scope.$$nextSibling指向scope的下一個相鄰範圍；
scope.$$prevSibling指向scope的上一個相鄰範圍；
通過在子級範圍中使用scope.$parent.name，來擷取對父級範圍的雙向繫結。
樣本如下：
<!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>父級範圍</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>
總結
以上就是AngularJS子級範圍問題的全部內容，希望對大家學習和工作能有所協助。大家如果有什麼疑問，歡迎提出來。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
