Eugene2016-06-14 15:42:11
Eugene, 2016-06-14 15:42:11

AngularJS, how to delegate events from parent directive to child directives with isolated scope for everyone?

In fact, the title of the question already explains the essence of the problem.

How to delegate events from the parent directive to the directives of the children with an isolated scope for everyone?

An example of what I tried is available here jsbin.com/nusoxad/5/edit?html ,js,output
Briefly about the task and the problem.
A component for a page with two subcomponents with their own logic. If the condition with the logic in the page component is executed immediately, then pass the event to the subcomponents.
Subcomponents do not see the event if it is dispatched when the parent component loads, but they do if it is dispatched by an event from the parent component. For example, in the parent component there is a button where, when clicked, an event is delegated to children.
In the example, I tried to wrap it in $timeouta call when loading the parent component, but in a real application, even this did not work. Also tried, hang directiverestrict: 'A'on the button, which, according to the condition, simulates a click when loading. It also works in the example, but in the application, the button is also a directive and it is very problematic and ugly to get the element on which you really need to simulate a click.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
_ _, 2016-06-15

No communication from top to bottom of the component tree through events (and up too)
. This is an outdated mechanism.
Use the new component notation, one-way bindings, and $onChanges in the controller.
This approach also prepares you for Angular2.
This can also be done by requiring the parentDirective controller in childrenDirective, registering childrenDirective delegate instances in some list of child components in parentDirective. Then, when certain events occur, parentDirective will pull the controllers of these delegates and events are not needed.

Nicholas, 2016-06-14

Read up on the compile/link loop.
You can execute your logic in the postLink function and everything will be ok:

link: {
        post: function($scope, element, attrs) {

But in general, if such needs arise, then something is wrong with the architecture.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question