Préface
Les propres instructions d'AngularJs incluent actuellement ng-include , ng-view , ng-switch et ng-repeat . La raison en est que bien que ces instructions soient définies en interne par AngularJS, elles sont également les mêmes que celles mises en œuvre par directive . Ils utilisent scope:true en interne. La portée de l'enfant hérite du rôle du parent et construit une portée indépendante de l'enfant. Toutes les liaisons bidirectionnelles ne peuvent pas être mises en œuvre, et ils ne peuvent mettre en œuvre que la portée de l'enfant hérite des propriétés du parent.
L'héritage AngularJS est implémenté par l'héritage prototype de JavaScript. L'héritage prototype signifie que la portée des parents se trouve sur la chaîne prototype de la portée de l'enfant. Parce que la recherche de la chaîne prototype ne sera déclenchée que lorsque l'attribut sera récupéré et ne sera pas déclenché lorsque la valeur d'attribut est modifiée. Nous devons donc convertir le type d'origine en un objet et lier la valeur aux propriétés de l'objet.
Comme vous pouvez le voir dans l'exemple, après modification, l'enfant peut modifier les propriétés de la portée des parents. Les types primitifs ne peuvent hériter que de la portée de la classe parent.
Il existe actuellement trois méthodes de mise en œuvre, et je les présenterai ensuite
Convertissez le type d'origine en un objet en ajoutant {} en portée parent.
Le code est le suivant:
<! Doctype html> <html lang = "en" ng-app = "childscope"> <éread> <meta charset = "utf-8"> <title> </ title> <script src = "lib / anguar.min.js" type = "text / javascript"> </ script> <style> .inputone {width: 100px; hauteur: 50px; Contexte: SkyBlue; } .Inner {Border: 1px Solid SkyBlue; Largeur: 200px; hauteur: 150px; } .outer {bordure: 1px Salton solide; Largeur: 200px; hauteur: 150px; } .sco {fond: skyBlue; } </ style> </ head> <body ng-controller = "childCon"> <div> <h3> Scope parent </h3> <span> {{vm.private1}} </span> <span> {{vm.private2}} </span> </v> <v> <h3> src = "'one.html'"> </ div> <div ng-include src = "'two.html'"> </div> </div> </ body> <script> var app = angular.module ("childScope", ['template']) .Controller ("childcon", [$ scope ", fonction ($ scope) {var" vm = $ scope.vm = {}; vm.Private1 = 12; var template = angular.module ("template", []) .run (["" $ templatecache ", function ($ templateCache) {$ templateCache.put (" one.html "," + "<div> <input type = 'text' ng-model = 'vm.private1' // </ div>")}]). ($ templateCache) {$ templatecache.put ("Two.html", "+" <div> <input type = 'text' ng-model = 'vm.private2' /> "+" <div class = 'sco'> <span> Type primitif </ span> {{test}} </v> "+" </v> ")Implémentation via le contrôleur comme syntaxe
controller as est en fait équivalent à controller . Le principe est de convertir le type d'origine en type d'objet.
<! Doctype html> <html lang = "en" ng-app = "childscope"> <éread> <meta charset = "utf-8"> <title> </ title> <script src = "lib / anguar.min.js" type = "text / javascript"> </ script> <style> .inputone {width: 100px; hauteur: 50px; Contexte: SkyBlue; } .Inner {Border: 1px Solid SkyBlue; Largeur: 200px; hauteur: 150px; } .outer {bordure: 1px Salton solide; Largeur: 200px; hauteur: 150px; } .sco {fond: skyBlue; } </ style> </ head> <body ng-controller = "ChildCon as Vm"> <div> <h3> Portée du parent </h3> <span> {{vm.private1}} </span> <span> {{vm.private2}} </span> </v> <v> <h3> Possé </h3> src = "'one.html'"> </ div> <div ng-include src = "'two.html'"> </div> </div> </ body> <script> var app = angular.module ("childscope", ["template ']) .Controller (" childcon ", [$ Scope", fonction ($ scope) {this.prive1 = 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> ")}]). ($ templateCache) {$ templatecache.put ("Two.html", "+" <div> <input type = 'text' ng-model = 'vm.private2' /> "+" <div class = 'sco'> <span> Type primitif </ span> {{test}} </v> "+" </v> ")Utilisez $ parent.name pour appeler la méthode interne pour l'implémenter.
L'héritage du prototypage signifie que la portée des parents est sur la chaîne prototype de la portée de l'enfant, qui est une caractéristique de JavaScript.
La portée d'AngularJS a également la relation définie en interne suivante:
Scope. $ Parent pointe vers la portée des parents de la portée;
Scope. $$ Childhead pointe vers la première sous-étendue de la portée;
Scope. $$ Childtail pointe vers la dernière sous-pente de la portée;
Scope. $$ NextSibling pointe vers la portée adjacente de la portée adjacente;
Scope. $$ PRIVELBLING POURTER LA PROCAGE DE LA SOCE ALD adjacente;
Obtenez une liaison bidirectionnelle à la portée des parents en utilisant scope.$parent.name dans la portée de l'enfant.
Les exemples sont les suivants:
<! Doctype html> <html lang = "en" ng-app = "childscope"> <éread> <meta charset = "utf-8"> <title> </ title> <script src = "lib / anguar.min.js" type = "text / javascript"> </ script> <style> .inputone {width: 100px; hauteur: 50px; Contexte: SkyBlue; } .Inner {Border: 1px Solid SkyBlue; Largeur: 200px; hauteur: 150px; } .outer {bordure: 1px Salton solide; Largeur: 200px; hauteur: 150px; } .sco {fond: skyBlue; } </ style> </ head> <body ng-controller = "childcon"> <div> <h3> Scope parent </h3> <span> {{private1}} </span> <span> {{private2}} </span> </div> <h3> src = "'one.html'"> </ div> <div ng-include src = "'two.html'"> </div> </div> </ody> <script> var app = angular.module ("childScope", ['template']) .Controller ("childcon", [$ Scope ", fonction ($ scope) {$ scope. $ scope.private2 = 22; $ scope.test = 123; var template = angular.module ("template", []) .run (["$ templateCache", function ($ templateCache) {$ templateCache.put ("one.html", "+" <div> <entrée = 'text' ng-model = '$ parent.private1' // </v> ")}]). ($ templateCache) {$ templatecache.put ("Two.html", "+" <div> <input type = 'text' ng-model = '$ parent.private2' /> "+" <div class = 'sco'> <span> Type primitif </ span> {{test}} </v> "+" </v> ")Résumer
Ce qui précède est le contenu entier du problème de portée des enfants AngularJS. J'espère que cela sera utile à l'étude et au travail de chacun. Si vous avez des questions, n'hésitez pas à vous demander.