javascript - Isolate scopes angularjs, ditching dependency injection, reusable components -

i haven't been fiddling angularjs's directive while , not still have grasp on it. before dive it, thinking react, on how components.

so have search on how create reusable components using directives, , found article:

http://michalostruszka.pl/blog/2015/01/18/angular-directives-di/

but implementation on final solution quite blurry, cannot figure out on how use correctly.

let's create title directive:

<epw-title store="epweventstore">{{vm.title}}</epw-title> 

and directive uses same service epweventstore can update state

<epw-event-list store="epweventstore"></epw-event-list> 

where epw-event-list renders list , when clicked should change value of vm.title of epw-title.

how possible?

update

q: nested? a: no, siblings.

don't put services inside views

just avoid misunderstanding, if epweventstore angularjs service (such provider, factory, service), not meant put attribute value inside template that:

<epw-title store="epweventstore">{{vm.title}}</epw-title> 

in well-designed decoupled architecture, views (template) should not "know" services. should refer controllers, directives , filters.

different directives can use same service

that means can have

... .directive("first", function(myservice) {     ... })  .directive("two", function(myservice) {     ... }) ... 

where, e.g., both directive can access , manipulate same data.

angular way declarative

following angular's philosophy, if directive depends on service, declare in directive's definition. whoever reads code - knows dependencies. makes code readable.

what author of article seems suggesting use events instead. publish-subscribe pattern. however, using inside directive, $rootscope, makes directive "leaky" no more encapsulated , can both affect external state , affected. , worse - reader has manually search codebase whoever affected events emitted directive. pattern has uses should enjoyed care.