«$ parent» в многоуровневых директивах

Question

Я пытаюсь понять a working code. Он может создавать очень простые json-данные, добавляя name:value pairs один за другим с графическим интерфейсом; с помощью пользовательской директивы и ее функции связи, он создает шаблон HTML в качестве правой руки на рисунке ниже:

Что меня озадачивает является ng-model="$parent.keyName" в выделенной части, а также $parent.valueType, ng-model="$parent.valueName" в других часть.

1) К чему относится $parent (в коде или на примере приведенного выше изображения)?

2) Есть ли способ показать значение $parent или $parent.keyName в консоли или добавив что-то (например, alert) в программу?

Answer 1

1) $parent относится к размеру родительского объекта (любой области). Все области имеют родителя отдельно от $rootScope, который является областью верхнего уровня. Они могут быть созданы любой угловой директивой ng-*, включая, но не ограничиваясь ими, ng-controller.

Вообще говоря, считается неправильной практикой использования $parent, потому что это относится к непосредственным родительским объектам, которые могут быть изменены. Если иерархия области действия изменяется (что она могла бы сделать, добавив директиву ng-* к элементу html, содержащемуся в шаблоне пользовательской директивы, например), тогда иерархия может быть разбита, а $parent не будет ссылаться на ту же область, что и когда-то.

2) Да, вы можете. В инструментах разработчика Chrome, если вы используете Right Click > Inspect Element (как вы на снимке экрана), вы выбираете элемент. Тогда, если вы оставите этот элемент выделен и перейдите на вкладку консоли и введите:.

angular.element($0).scope() 

Это возвращает объем, что выбранный элемент пребывает в Тогда, если вы наберете:

angular.element($0).scope().$parent() 

Это возвращает родительский . объем сферы, что выбранный элемент проживает в а для чего это стоит вы также можете сделать:

angular.element($0).scope().$parent().$parent() 

и продолжать идти вверх по иерархии области видимости.

Также ознакомьтесь с AngularJS Batarang chrome extension, который позволяет просматривать области в инструментах разработчика Chrome.

Answer 2

В чем состоит этот $ parent?

Родитель относится к области вашего родительского контроллера. Изображение в вашем вопросе не дает четкой картины, поэтому я добавлю пример для него.

<div ng-controller="EditorController"> 
    <div ng-controller="ChildEditorController"> 
     .... 
    </div> 
</div> 

Предположим, у вас есть свойство editorsList (массив) в вашем EditorController (который является родительским контроллер здесь), вы можете сделать что-то вроде

<div ng-controller="EditorController"> 
    <div ng-controller="ChildEditorController"> 
     Editors Count: {{$parent.editorsList.length}} 
    </div> 
</div> 

Таким образом, вы можете получить доступ к возможности вашего родителя с $ parent.