Prefácio
As próprias instruções do AngularJS atualmente incluem ng-include , ng-view , ng-switch e ng-repeat . A razão para isso é que, embora essas instruções sejam definidas internamente pelos angulares, elas também são as mesmas que as implementadas pela directive . Eles usam scope:true internamente. O escopo da criança herda o papel dos pais e constrói um escopo infantil independente. Todas as ligações bidirecionais não podem ser implementadas e só podem implementar o escopo da criança herda as propriedades do pai.
A herança do AngularJS é implementada através da herança do protótipo de JavaScript. A herança do protótipo significa que o escopo dos pais está na cadeia de protótipos do escopo da criança. Como a pesquisa da cadeia de protótipo só será acionada quando o atributo for recuperado e não será acionado quando o valor do atributo for alterado. Portanto, precisamos converter o tipo original em um objeto e vincular o valor às propriedades do objeto.
Como você pode ver no exemplo, após a modificação, a criança pode modificar as propriedades do escopo dos pais. Os tipos primitivos podem herdar apenas o escopo da classe pai.
Atualmente, existem três métodos de implementação, e eu os apresentarei a seguir
Converta o tipo original em um objeto adicionando {} ao escopo dos pais.
O código é o seguinte:
<! Doctype html> <html lang = "en" ng-app = "ChildScope"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javscript"> </script>. Altura: 50px; Antecedentes: Skyblue; } .inner {borda: 1px sólido skyblue; Largura: 200px; Altura: 150px; } .outer {borda: 1px Solid Saltmon; Largura: 200px; Altura: 150px; } .SCO {Background: Skyblue; } </style> </ad Head> <Body ng --Controller = "ChildCon"> <div> <h3> Escopo dos pais </h3> <pan> {{vm.private1}} </mpan> <div> {{vm.private2} </span> </div >- <dl> <h3> scope src = "'One.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <cript> var app = angular.module ("ChildScópio", ['modelo'). vm = $ scope.vm = {}; var modelo = angular.module ("modelo", []) .run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("One.html", " +" <div> <input Type = 'text' ng-model = 'vm.private1' /////8) ($ templatecache) {$ templatecache.put ("dois.html", " +" <div> <tipo de entrada = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'> <span> type </span> {{}} </div> "Implementação através do controlador como sintaxe
controller as é realmente equivalente ao objeto de amostra do controller . O princípio é converter o tipo original em 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/javscript"> </script>. Altura: 50px; Antecedentes: Skyblue; } .inner {borda: 1px sólido skyblue; Largura: 200px; Altura: 150px; } .outer {borda: 1px Solid Saltmon; Largura: 200px; Altura: 150px; } .SCO {Background: Skyblue; } </style> </head> <corpo ng-controller = "ChildCon como vm"> <div> <h3> escopo dos pais </h3> <pan> {{vm.private1}} </div> <div> <h3> {{vm.private2}} </span> </div> <d> <h3> {{vm.prate2}} <hp>> </div> <h3> <h3> <h3> {{vm.prate2}} <h3 </div> <h3> <h3> <h3> {vm.prate2}} <t>> <div> <h3> <h3> {vm.prate2} </ src = "'One.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <cript> var app = angular.module ("ChildScópio", ['modelo'). this.private2 = 22; var modelo = angular.module ("modelo", []) .run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("One.html", " +" <div> <input Type = 'text' ng-model = 'vm.private1'/>/> </> </> </> ") ($ templatecache) {$ templatecache.put ("dois.html", " +" <div> <tipo de entrada = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'> <span> type </span> {{}} </div> "Use $ parent.name para chamar o método interno para implementá -lo.
A herança de prototipagem significa que o escopo dos pais está na cadeia de protótipos do escopo da criança, que é uma característica do JavaScript.
O escopo do AngularJS também possui o seguinte relacionamento definido internamente:
Escopo. $ Parent aponta para o escopo dos pais do escopo;
Escopo. $$ Childhead aponta para o primeiro subscópio de escopo;
Escopo. $$ Childtail aponta para o último subscópio de escopo;
Escopo. $$ A próxima aponta para o próximo escopo adjacente de escopo;
Escopo. $$ Prevesbling aponta para o escopo adjacente anterior de escopo;
Obtenha uma ligação bidirecional ao escopo dos pais usando scope.$parent.name no escopo da criança.
Exemplos são os seguintes:
<! Doctype html> <html lang = "en" ng-app = "ChildScope"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javscript"> </script>. Altura: 50px; Antecedentes: Skyblue; } .inner {borda: 1px sólido skyblue; Largura: 200px; Altura: 150px; } .outer {borda: 1px Solid Saltmon; Largura: 200px; Altura: 150px; } .SCO {Background: Skyblue; } </style> </ad Head> <corpo ng-controller = "ChildCon"> <div> <h3> Escopo dos pais </h3> <pan> {{private1}} </span> <span> {{private2}} </span> </divid> <h3> próprio escopo </h3> src = "'One.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <cript> var app = angular.module ("childscópio", ['model'). $ scope.private2 = 22; var modelo = angular.module ("modelo", []) .run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("One.html", " +" <div> <input Type = 'text' ng-model = '$ parent.private1' ////1880) ($ templatecache) {$ templatecache.put ("dois.html", " +" <div> <type de entrada = 'text' ng-model = '$ parent.private2'/> " +" <div class = 'sco'> <span> type </span> {{test}} </div => "" "" }]) </script> </html>Resumir
O exposto acima é todo o conteúdo do problema do escopo da criança angularJS. Espero que seja útil para estudar e trabalhar de todos. Se você tiver alguma dúvida, não hesite em perguntar.