Angular 1.5。 组件通信。 最佳实践

Question

I'm using Angular 1.5.9.

Right now I have two components which need to communicate. If I change something in the first one (for example choose item in the list) => second one needs to be changed (item that was chosen needs to be displayed) and vice versa (changing in the second one => change in the first one) I have read about a lot of approaches, so I can manage this in few ways:

1. Communication via shareable Service
2. Using two way data binding ("=" option in component bindings). Example: https://jsfiddle.net/peter_drinnan/t4q4nrfp/27/
3. Using one way data binding with input/output approach. Example: http://stackoverflow.com/questions/36033940/how-to-pass-data-between-child-components-in-angular-1-5-not-using-scope
4. Using "require" (some parent component to share data). Example: http://stackoverflow.com/questions/36645065/component-communication-in-angular-1-5

Maybe I miss something? What is the best practice?

Thank you.

Answer 1

Your whole example is perfect for using 3 option:

1. parent component to load/save data
2. Component to show list with callback on select
3. Component to show(+edit)

This way will give you easy testability and etc. (Please take a look at benefit list )

What is interesting for me is how to communicate between not so close components:

We have component A to show cities and component B to show Countries each load data for itself, and trick is - when you delete last city from country (A) you need to remove country from a list (C). Assume that we need to reload list of countries...

What is best practice to communicate in this case?

I have a strong feeling that events using $rootScope is bad way to go...