AngularJS, как делегировать события из родительской директивы, директивам детей при изолированной области видимости у всех?

Question

[Евгений]

По сути заголовок вопроса уже объясняет суть проблемы.

Как делегировать события из родительской директивы, директивам детей при изолированной области видимости у всех?

Пример того, что пробовал доступен тут jsbin.com/nusoxad/5/edit?html,js,output

Коротко о задаче и проблеме.
Задача:
Компонент для страницы, на которой два подкомпонента со своей логикой. В случае если условие с логикой в компоненте страницы выполняется сразу, то передать событие подкомпонентам.

Проблема:
Подкомпоненты не видят события, если оно передаётся при загрузке родительского компонента, но видят, если оно передаётся по событию из родительского компонента. Например в родительском компоненте кнопка, где при клике делегируется событие детям.

В примере пробовал обернуть в $timeout вызов при загрузке родительского компонента, но в реальном приложении, даже это не сработало. Также пробовал, повесить директиву restrict: 'A' на кнопку, которая по условию при загрузке имитирует нажатие. В примере также работает, но в приложении, кнопка тоже директива и очень проблемно и некрасиво доставать элемент, на котором в действительности надо имитировать нажатие.

Comments

[Сергей Протько]

Позвольте спросить, а зачем нам события? Если у нас в компонентах верхнего уровня меняется состояние мы просто пробрасываем его внутрь директив. Либо пусть за события отвечает сервис.

Answer 1

[_ _]

Никаких коммуникаций сверху вниз по дереву компонент через события (да и вверх тоже)
Это устаревший механизм.
Используйте новую нотацию component, односторонние байндинги и $onChanges в контроллере.
jsbin.com/yoxohemiji/1

Этот подход также готовит вас к Angular2.

Также это можно сделать через require контроллера parentDirective в childrenDirective, регистрации экземпляров-делегатов childrenDirective в некоем списке дочерних компонент в parentDirective. Тогда при наступлении определенных событий parentDirective будет дергать контроллеры этих делегатов и события не нужны.

Comments

[Евгений]

Первый вариант хорош, но когда это большой проект, то переделать стопки директив не очень просто, хоть и изменения в описании directive и component имеют минимальную разницу.

А вот второй вариант, если можно было бы пример отталкиваясь от начального варианта, то вероятно подошло бы.

За ответ большое спасибо.

[_ _]

Евгений: codepen.io/AMar4enko/pen/beeQvb
Родительская и дочерняя директивы, событие в родительской директиве обновляет состояние дочерних.

Answer 2

[Николай]

Почитайте о compile/link цикле.
Можно в postLink функции выполнить вашу логику и всё будет окей:

link: {
        post: function($scope, element, attrs) {
          $scope.$broadcast('SOME_EVENT_NAME');
        }
      }

Но вообще, если возникают такие потребности - то с архитектурой что-то не так.

Comments

[Евгений]

Забыл упомянуть, что в приложении, тоже не помогло. Не могу объяснить почему. Тоже пробовал такое решение.

[Николай]

Евгений: значит проблема в каком-то другом месте.

[Николай]

Я бы вообще всю логику по бинду событий перенес в link, чтобы $scope в контроллер не инжектить.

[Евгений]

Ну инжектить $scope в контроллере всёравно надо, т.к. методы/функционал описывать в link блоке малость странно.

[Николай]

Евгений: вы же биндите всё на контроллер, зачем вам $scope для описания методов?