angular passing variables to child component, skip intermediate

Question

My angular app (angular 1.5) has several different components which are distributed over the whole screen and I want to pass arguments between them. The page has the following structure:

<div id="semanticParent">
    <div id="ui-component1">
        <div id="ui-component2">
            <div id="semanticChild">
            </div>
        </div>
    </div>
</div>

Each of those divs is a seperate component with an isolated scope, where the ui-components are 3rd party libraries which handle only the appearance and should not be influenced by the application logic.

One way I can think of to solve this is to create a service which is injected to semanticParent and semanticChild and all variables are passed through that service, but that doesn't seem really good.

So what is the angular way of doing this?

Answer 1

Actually it depends on your functional needs :

1) If the parent is owner of the data (it create/edits the data) and the child only read it, you should nest the child component in the parent and pass the data through attributes.

2) If both parent and child can edit and read the data, it is better to make them interact with the data through a service which can ensure the consistency of the data.

I don't know if my answer is what you need but I hope it will clarify.