angularjs - How to communicate between controllers while not using SharedService between them? -

i reading answers communication between controllers , directive, seems me occurred using shared service , inject each 1 of them. when i'm developing large scale application, don't know page going have in it. may have 2 controllers need communicate between them, , may have 5 directive , 2 controllers in same page. don't know scratch going inside view/page, need better way how communicate between them. i'm looking better way it, right angularjs way.

http://i60.tinypic.com/2z87q05.png

above view example i'm working on: on left side have directive tree, on right side have chart controller , directive grid. may have more this, example of may have. keep in mind, view can have x componenets, don't know beginning in it.

now, lets each time select node in tree on left, want able tell other controllers nodeselectedchange event happend. don't want inject each 1 of them service holds info, thought having page manager controller, father of view. controllers/directives inside page should talk each other pagemanagercontroller, thing in page knows has inside of it.

important here keep in mind: tree don't know page has chart or grid, don't need know each other in order communicate. page manager knows everything, want make magic - should has service? should each other component has service , service can talk pagemanager service?

help me think. hope can connect dots create better way communication. think sharedservice way small app, when know start going on in app, of time - don't know , when going use directive, should able talk everyone.

what don't events:

1. the events being fired inside controller, while should inside service.
2. the listener controller should know name of event going listen too. if change event name being $emit or $broadcast, need go on listeners $on("eventname") in app , change unique name.
3. directive black box, don't want check inside of each time , find names of events being broadcasting in order communicate it.

i need way exposed events names out of directive, service connected controller.

it depends on type of information want share tree directive other sections of page.

you have few options in front of you:

use scope events

as mentioned above, fire event , listen events in various controllers and/or services. said, can ugly, fast. tracing events , figuring out event listeners active @ given point can give best engineers migraine!

use service

another option use service, let's pagemanagerservice. in case,

• each click of tree item set information on pagemanagerservice, saying page, objects, , items needs display
• each component needs change
  • register listener triggered when pagemanagerservice changes
  • add watch on service , run code when pagemanagerservice changes

the service going shared state, , upto directives , components on how wants consume , respond changes in state.

use ui router

but more think this, more seems use case ui router. ui router allows define states, , have different parts of page respond in different ways state changes. each section respond state change in own way, loading

• a different controller
• a different template, possibly different components , widgets

so end having structure with

• the tree directive on left
• a ui-view named, let's say, top
• a ui-view named, let's say, bottom

each item in tree directive can ui-sref, fancy way of saying instead of redirecting url, redirect state.

you define configurations in application in single place, so:

$stateprovider.state('dashboard', {   views: {     "top": { templateurl: 'my/dashboard.html', controller: 'dashboardctrl'}     "bottom": { templateurl: 'my/dashboard-grid.html', controller: 'dashboardgridctrl'}   } }) 

similarly, have state definition each item in tree directive, , each 1 link different state.

of course, state definitions done in config section in angularjs application, know before application starts. if needed dynamic states well?

well, few answers / thoughts lead down way well:

• the controllers , services have predefined, not dynamically creating html content and/or js controllers
• it possible expose $stateprovider global variable in config section, , dynamically call stateprovider.state inside controller / service, wherever have new state definitions.
• more not though, controllers , html remain constant, , need trigger different states various parameters. can done calling transitionto function transition defined state various state parameters.