AngularJS $broadcast and isolate scope

Question

So I have two directives splitter and pane that may be used like so:

<splitter>
   <pane></pane>
   <pane></pane>
</splitter>
<splitter>
</splitter>

I want them all to have isolate or inherited scope. However I also want to be able to $broadcast (or equivalent) between them so that if I were to $broadcast on one directive's scope, the same event would be triggered on all the nested directives that are listening but not it's parent or siblings (no $rootScope here).

How would one go about doing this? My solution must be future friendly as I will be adding more directives in to the mix which also listen for this event.

You can make a service that both directives load and then share the variables that you want both directives to be able to manipulate — Lloyd Banks
– Lloyd Banks, Commented May 27, 2014 at 14:59
@LloydBanks True, but at that point, it is really no different from using $rootScope to broadcast/receive, which he doesn't want to use. In other words, if you have multiple splitters, the service won't know which child to route it to. Just like using $rootScope to broadcast, you can't control which listeners get the message. — Brian Genisio
– Brian Genisio, Commented May 27, 2014 at 15:04
@LloydBanks they aren't manipulating shared variables, they are triggering an event. In this particular use-case it is to do with resizing. When I fire a resize event I want it to propagate to all children so that they in turn can react to it. window.onresize is not enough as the elements can be resized individually of the window and should only affect their children that choose to listen. — George Reith
– George Reith, Commented May 27, 2014 at 15:04
@GeorgeReith A shared service can easily be turned into a pub/sub service, so @LloydBanks is not incorrect here. The problem is with targeting. A shared service is just as global as $rootScope. You could use either mechanism to communicate, but you can't properly target. The only way I know of to do that is to have them all have a shared "communications Id", and then filter the messages based on communication IDs. It is ugly, but I can't come up with another solution... other than requiring directive controllers OR not using isolated scope, which you also don't want, I'm sure. — Brian Genisio
– Brian Genisio, Commented May 27, 2014 at 15:09

Guillaume Besson · Accepted Answer · 2014-05-27 15:26:47Z

3

To do inter-directive communication, the best is to use the parent directive controller and expose methods in this.

Then you just have to require it in your children directive (require: '^splitter') and the parent controller will be injected as the fourth argument of your link function.

For more information, you can see the official documentation about Creating Directives that Communicate.

answered May 27, 2014 at 15:26

Guillaume Besson

5722 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Genisio Over a year ago

Hmmm... that is what I originally said, but @George marked me down, saying that it wasn't a valid answer, so I deleted it. I still think that this is the best approach. +1

George Reith Over a year ago

@BrianGenisio I didn't mark you down. I was sad you deleted it, although it's not what I'm after (requires too much coupling becomes unmanageable for the sort of scale I'm after) I was glad it was posted. This also fails when I want to nest the same directive within itself as ^splitter also injects the directives own controller if it matches (the documentation is lacking in that regard).

Collectives™ on Stack Overflow

AngularJS $broadcast and isolate scope

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related