Prefacio
Las propias instrucciones de AngularJS actualmente incluyen ng-include , ng-view , ng-switch y ng-repeat . La razón de esto es que aunque estas instrucciones se definen internamente por AngularJS, también son las mismas que las implementadas por directive . Usan scope:true internamente. El alcance infantil hereda el papel de los padres y construye un alcance infantil independiente. No se pueden implementar todos los enlaces bidireccionales, y solo pueden implementar el alcance infantil hereda las propiedades del padre.
La herencia AngularJS se implementa a través de la herencia prototipo de JavaScript. La herencia prototipo significa que el alcance principal está en la cadena prototipo del alcance infantil. Porque la búsqueda de la cadena prototipo solo se activará cuando se recupere el atributo y no se activará cuando se cambie el valor del atributo. Por lo tanto, necesitamos convertir el tipo original en un objeto y vincular el valor a las propiedades del objeto.
Como puede ver en el ejemplo, después de la modificación, el niño puede modificar las propiedades del alcance principal. Los tipos primitivos solo pueden heredar el alcance de la clase principal.
Actualmente hay tres métodos de implementación, y los presentaré a continuación.
Convierta el tipo original en un objeto agregando {} al alcance principal.
El código es el siguiente:
<! 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; Altura: 50px; Antecedentes: SkyBlue; } .inner {border: 1px Solid SkyBlue; Ancho: 200px; Altura: 150px; } .outer {borde: 1px sólido saltmon; Ancho: 200px; Altura: 150px; } .sco {fondo: skyblue; } </style> </head> <cuerpo ng-concontroller = "childcon"> <div> <h3> alcance principal </h3> <span> {{vm.private1}} </span> <span> {{vm.private2}}} </span> </div> <div> <h3> src = "'One.html'"> </div> <div ng -include src = "'two.html'"> </div> </div> </body> <script> var app = angular.module ("ChildScope", ['plantate']). vm = $ scope.vm = {}; var Template = Angular.module ("Template", []) .run (["$ TemplateCache", function ($ templateCache) {$ templateCache.put ("one.html", " +" <div> <input type = 'text' ng-model = 'vm.private1' // </iv> ")}]. ($ TemplateCache) {$ TemplateCache.put ("two.html", " +" <div> <input type = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'> <span> type primitivo </span> {{test}}} </div> " +" </iv> ")Implementación a través del controlador como sintaxis
controller as es realmente equivalente al objeto de muestra del controller . El principio es convertir el tipo original en tipo de objeto.
<! 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; Altura: 50px; Antecedentes: SkyBlue; } .inner {border: 1px Solid SkyBlue; Ancho: 200px; Altura: 150px; } .outer {borde: 1px sólido saltmon; Ancho: 200px; Altura: 150px; } .sco {fondo: 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']. this.private2 = 22; var Template = Angular.module ("Template", []) .run (["$ TemplateCache", function ($ templateCache) {$ templateCache.put ("one.html", " +" <div> <input type = 'text' ng-model = 'vm.private1'/> </iv> "). ($ TemplateCache) {$ TemplateCache.put ("two.html", " +" <div> <input type = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'> <span> type primitivo </span> {{test}}} </div> " +" </iv> ")Use $ parent.name para llamar al método interno para implementarlo.
La herencia de prototipos significa que el alcance principal está en la cadena prototipo del alcance infantil, que es una característica de JavaScript.
El alcance de AngularJS también tiene la siguiente relación definida internamente:
Alcance. $ Punta principal al alcance principal del alcance;
Alcance. $$ Childhead señala el primer subscope del alcance;
Alcance. $$ Childtail señala el último subscope del alcance;
Alcance. $$ NEXTSIBLE Puntos al siguiente alcance adyacente del alcance;
Alcance. $$ Puntos previos al alcance adyacente anterior del alcance;
Obtenga un enlace de dos vías al alcance principal usando scope.$parent.name en el alcance infantil.
Los ejemplos son los siguientes:
<! 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; Altura: 50px; Antecedentes: SkyBlue; } .inner {border: 1px Solid SkyBlue; Ancho: 200px; Altura: 150px; } .outer {borde: 1px sólido saltmon; Ancho: 200px; Altura: 150px; } .sco {fondo: skyblue; } </syle> </head> <cuerpo ng-concontroller = "ChildCon"> <iv> <h3> alcance principal </h3> <span> {{private1}} </span> <span> {{private2}} </span> </div> <div> <h3> propio Scope </h3> <iv nginclude src = "'One.html'"> </div> <div ng-incluye src = "'two.html'"> </div> </div> </body> <script> var app = angular.module ("ChildScope", ['plantate']) .Controller ("ChildCon", ["$ scope ($ scope) {$ scope) {$ scope) $ scope.private2 = 22; var Template = Angular.Module ("Template", []) .run (["$ TemplateCache", function ($ TemplateCache) {$ TemplateCache.put ("One.html", " +" <div> <input type = 'text' ng-model = '$ parent.private1' // </iv> ")). function ($ TemplateCache) {$ TemplateCache.put ("two.html", " +" <div> <input type = 'text' ng-model = '$ parent.private2'/> " +" <div class = 'sco'> <span> type primitivo </span> {{test}}}} </div> "</iv>")Resumir
Lo anterior es todo el contenido del problema de alcance infantil AngularJS. Espero que sea útil para el estudio y el trabajo de todos. Si tiene alguna pregunta, no dude en preguntar.