Предисловие
Собственные инструкции AngularJS в настоящее время включают ng-include , ng-view , ng-switch и ng-repeat . Причина этого заключается в том, что, хотя эти инструкции определяются внутренне AngularJS, они также такие же, как и те, которые реализованы в directive . Они используют scope:true внутри. Детская масштаб наследует роль родителя и создает независимую масштаб ребенка. Все двусторонние привязки не могут быть реализованы, и они могут реализовать только масштаб дочернего состава, наследует свойства родителя.
Унаследование AngularJS реализуется через прототип наследования JavaScript. Прототип наследование означает, что родительский объем находится в цепочке прототипов детского масштаба. Поскольку поиск цепочки прототипа будет инициирован только при получении атрибута, и не будет запускаться при изменении значения атрибута. Таким образом, нам нужно преобразовать исходный тип в объект и привязать значение с свойствами объекта.
Как вы можете видеть в примере, после модификации ребенок может изменить свойства родительского масштаба. Примитивные типы могут только наследовать объем родительского класса.
В настоящее время существует три метода реализации, и я представлю их дальше
Преобразовать исходный тип в объект, добавив {} в родительский объем.
Код заключается в следующем:
<! 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> .induton {width: 100px; Высота: 50px; Фон: SkyBlue; } .inner {border: 1px solid skyblue; Ширина: 200px; Высота: 150px; } .outer {border: 1px solid saltmon; Ширина: 200px; Высота: 150px; } .sco {founale: skyblue; } </style> </head> <body ng-controller = "childcon"> <div> <h3> parent scope </h3> <pan> {{vm.private1}} </span> <pan> {{vm.private2}} </span> </div> <div> <h3> собственная сфера src = "'One.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <script> var app = angular.module ("kidscope", ['шаблон vm = $ scope.vm = {}; 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'> <pan> primitive </span> {{test}} </div> "</div>")}} </t kipt>) </t kipt>) </tsl>))Реализация через контроллер в качестве синтаксиса
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> .induton {width: 100px; Высота: 50px; Фон: SkyBlue; } .inner {border: 1px solid skyblue; Ширина: 200px; Высота: 150px; } .outer {border: 1px solid saltmon; Ширина: 200px; Высота: 150px; } .sco {founale: skyblue; } </style> </head> <body ng-controller = "childcon as vm"> <div> <h3> родительская область </h3> <pan> {vm.private1}} </span> <pan> {{vm.private2}} </span> </div> <ho Div> <h.h3> Собственное src = "'One.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <cript> var app = angular.module ("kidsscope", ['tempate']. Контроллер ("Childcon", ["$ scope", $ function). this.private2 = 22; var template = angular.module («шаблон», []) .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'> <pan> primitive </span> {{test}} </div> "</div>")}} </t kipt>) </t kipt>) </tsl>))Используйте $ parent.name, чтобы вызвать внутренний метод для его реализации.
Прототипирование наследования означает, что родительский объем находится в цепочке прототипов детского масштаба, которая является особенностью JavaScript.
Объем AngularJS также имеет следующие внутренние отношения:
Область.
Область.
Область. $$ Childtain указывает на последнюю подскастую масштаба;
ОБЛАСТЬ.
Область.
Получите двустороннее привязанность к родительскому объему, используя 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> .induton {width: 100px; Высота: 50px; Фон: SkyBlue; } .inner {border: 1px solid skyblue; Ширина: 200px; Высота: 150px; } .outer {border: 1px solid saltmon; Ширина: 200px; Высота: 150px; } .sco {founale: skyblue; } </style> </head> <body ng-controller = "ChildCon"> <div> <h3> Parent Scope </h3> <pan> {{private1}} </span> <pan> {{private2}} </span> </div> <div> <h3> собственная область </h3> <div ng-include> </div> <div> <h3> src = "'one.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <cript> var app = angular.module ("kildscope", ['шаблон $ scope.private1 = 12; var template = angular.module («шаблон», []) .run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("one.html", " +" <div> <input type = 'text' ng-model = '$ parent.private1' // </div> "). function ($ templatecache) {$ templatecache.put ("two.html", " +" <div> <input type = 'text' ng-model = '$ parent.private2'/> " +" <div class = 'sco'> <pan> primitiate </span> {{тест}} </div> "</div>") ")" }]) </script> </html>Суммировать
Вышеуказанное - все содержание проблемы с детьми AngularJS. Я надеюсь, что это будет полезно для каждого обучения и работы. Если у вас есть какие -либо вопросы, пожалуйста, не стесняйтесь задавать.