How to write directives (components) that interact with each other?

Question

Angular

There is such an example in the documentation https://docs.angularjs.org/guide/directive (section "Creating Directives that Communicate")
In this example, the directives in the house tree are placed "one inside the other", in my case the house directive trees do not intersect .
Case: There is a grid with a table inside, rows in the grid can be added and removed by controls inside the block, but it should be possible to move controls to an arbitrary place on the page
. Should this be done in directives or is a component enough?
I plan to make the grid a component and put the creation of the grid object into a factory, in the same factory there will be a method that returns an already created grid with string management methods.
There can be several grids on the page, and for some I put out controls and for some I don’t, which is why I plan to use a factory.

Answer 1

In this example, the directives in the house tree are placed "one inside the other", in my case, the house trees of the directives do not intersect.

Hence, they should not interact directly.
The scheme is built like this. The directive / component asks the service to change the state, the service changes the state and somehow triggers this business (events, state reload), resolvers work out and load a new piece of the state. This case is thrown into the components through bindings.
That is, ideally, the components have no idea where the state comes from, and do not change it themselves, they ask the services to do this. So the changes go in a circle and you can organize any level of logic.

Answer 2

Take an angular course at codeacademy. There, among other things, the creation of directives is being worked out