Preface
AngularJS's own instructions currently include ng-include , ng-view , ng-switch , and ng-repeat . The reason for this is that although these instructions are defined internally by AngularJS, they are also the same as those implemented by directive . They use scope:true internally. The child scope inherits the role of the parent and builds an independent child scope. All two-way bindings cannot be implemented, and they can only implement the child scope inherits the properties of the parent.
AngularJS inheritance is implemented through the prototype inheritance of javascript. Prototype inheritance means that the parent scope is on the prototype chain of the child scope. Because the search of the prototype chain will only be triggered when the attribute is retrieved, and will not be triggered when the attribute value is changed. So we need to convert the original type into an object and bind the value to the object's properties.
As you can see in the example, after modification, the child can modify the properties of the parent scope. Primitive types can only inherit the scope of the parent class.
There are currently three implementation methods, and I will introduce them next
Convert the original type to an object by adding {} to the parent scope.
The code is as follows:
<!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 saltmon; width: 200px; height: 150px; } .sco{ background: skyblue; } </style></head><body ng-controller="childCon"> <div> <h3>Parent scope</h3> <span>{{vm.private1}}</span> <span>{{vm.private2}}</span> </div> <div> <h3>Own scope</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>primitive type</span>{{test}}</div>" + "</div>") }])</script></html>Implementation through controller as syntax
controller as is actually equivalent to controller 's sample object. The principle is to convert the original type into object type.
<!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 saltmon; width: 200px; height: 150px; } .sco{ background: skyblue; } </style></head><body ng-controller="childCon as vm"> <div> <h3>Parent scope</h3> <span>{{vm.private1}}</span> <span>{{vm.private2}}</span> </div> <div> <h3>Own scope</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>primitive type</span>{{test}}</div>" + "</div>") }])</script></html>Use $parent.name to call the internal method to implement it.
Prototyping inheritance means that the parent scope is on the prototype chain of the child scope, which is a feature of JavaScript.
The scope of AngularJS also has the following internally defined relationship:
scope.$parent points to the parent scope of scope;
scope.$$childHead points to the first subscope of scope;
scope.$$childTail points to the last subscope of scope;
scope.$$nextSibling points to the next adjacent scope of scope;
scope.$$prevSibling points to the previous adjacent scope of scope;
Get a two-way binding to the parent scope by using scope.$parent.name in the child scope.
Examples are as follows:
<!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 saltmon; width: 200px; height: 150px; } .sco{ background: skyblue; } </style></head><body ng-controller="childCon"> <div> <h3>Parent scope</h3> <span>{{private1}}</span> <span>{{private2}}</span> </div> <div> <h3>Own scope</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>primitive type</span>{{test}}</div>" + "</div>") }])</script></html>Summarize
The above is the entire content of the AngularJS child scope problem. I hope it will be helpful to everyone's study and work. If you have any questions, please feel free to ask.