前言
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> <h3>父級作用域</h3> <span>{{vm.private1}}</span> <span>{{vm.private2}}</span> </div> <div> <h3>自己作用域</h3> <div ng-include src="'one.html'"></div> <div 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> <h3>父級作用域</h3> <span>{{vm.private1}}</span> <span>{{vm.private2}}</span> </div> <div> <h3>自己作用域</h3> <div ng-include src="'one.html'"></div> <div 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> <h3>父級作用域</h3> <span>{{private1}}</span> <span>{{private2}}</span> </div> <div> <h3>自己作用域</h3> <div ng-include src="'one.html'"></div> <div 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子級作用域問題的全部內容，希望對大家學習和工作能有所幫助。大家如果有什麼疑問，歡迎提出來。