Listening to events from within custom directive controllers

8,471 views
Skip to first unread message

itsb...@gmail.com

unread,
Sep 10, 2012, 10:22:26 PM9/10/12
to ang...@googlegroups.com
Hi all, is there any way for custom directive controllers to listen to events emitted by application level code?

Here's a JS fiddle: http://jsfiddle.net/mWQ2y/30/

Somehow it seems the scopes are not correct. I even tried listening at the rootScope level, but that doesn't seem to work either. The use case would be for a custom directive/service that could listen to events emitted by any Angular module on the page. Any help would be appreciated, thanks!

Peter Bacon Darwin

unread,
Sep 11, 2012, 3:18:30 AM9/11/12
to ang...@googlegroups.com
Have a look at this:  http://jsfiddle.net/mWQ2y/31/ 
You need to broadcast on the rootScope, you can't catch events in the directive if they are broadcast in the controller function as the linking function has not been run yet.  You can broadcast them using $timeout though.  Also your directive had a controller rather than a linking function.
Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

itsb...@gmail.com

unread,
Sep 11, 2012, 3:07:53 PM9/11/12
to ang...@googlegroups.com
Thanks! Guess I should have tried that first... as a follow up question, is there a way to get the directive to listen events from page markup (and not directive template markup?)

Perhaps there's a way to bind the scope?  http://jsfiddle.net/mWQ2y/35/

Ricardo Bin

unread,
Sep 11, 2012, 3:13:21 PM9/11/12
to ang...@googlegroups.com, itsb...@gmail.com
Hmmm...

You say anything like this: http://jsfiddle.net/ricardohbin/3bmn5/ ?

itsb...@gmail.com

unread,
Sep 11, 2012, 3:21:04 PM9/11/12
to ang...@googlegroups.com, itsb...@gmail.com
Actually, this time I'm trying to avoid using pubsub. I'm thinking in the case where you have custom directives consuming app level markup, it would be useful to have app level markup hook into existing directive functionality. It's almost like plug and play.

I understand this is in most cases undesirable so it's not automatic, since it's app markup and not directive markup. But short of having to use pubsub, is there a way to specify from the directive side that certain variables or functions should be bound to the directive rather than the controller ? Or perhaps, some type of ng attribute on the transcluded markup that will say "hey, bind me!" ?

Peter Bacon Darwin

unread,
Sep 11, 2012, 3:53:30 PM9/11/12
to ang...@googlegroups.com
Well if you don't create an isolate scope on the directive then the scope.foo in the linking function overrides the one from outside:  http://jsfiddle.net/mWQ2y/36/ 
But what you really want is access to the transclude scope :-) I am not sure how to access that.
Pete

itsb...@gmail.com

unread,
Sep 11, 2012, 5:07:19 PM9/11/12
to ang...@googlegroups.com
I believe it's possible for directive markup to get access to outside scope using $parent. So if scope:true, you can call outside scope using $parent.foo(). 

But I actually want it the other way around - I want the transcluded markup to have access to directive scope. It'd be great if somehow in the directive configuration I could tell it to override only certain functions and variables on a case by case basis. If I set scope to false, it looks like it merges directive scope with outside scope, so it's not a completely override. I suppose if I just namespace the stuff it should be safe... feels all sorts of dirty though. :)

Peter Bacon Darwin

unread,
Sep 12, 2012, 4:32:43 AM9/12/12
to ang...@googlegroups.com
If scope is false then the directive scope "inherits" directly from the scope containing the directive.  Therefore any changes to this scope (like adding a foo fn) will potentially overwrite things in the parent scope.
If scope is true then there is a new scope for the template of the directive, which doesn't "inherit" any values from the scope containing the directive.  This makes is safe to add things to this scope without the fear of damaging the outside scope. You are right that if you want to access the outer scope the you can use $parent.scope but if you add functions to that you are again potentially overwriting things in the outer scope - in fact even worse, since in the case of scope false, you are working with a child scope and only if there is already a field with the same name does it affect the parent scope.

Thinking about it now, even if you could access the transclusion scope, this would be no better than having scope set to false, because if you modify the transclusion scope then you may again overwrite things in the parent scope.

I am pretty sure one could over come this with a directive but I haven't got my head around it yet.
Pete
Reply all
Reply to author
Forward
0 new messages