AngularJS: sending events from the isolated scope

Question

I want to have a set of reusable widgets which can be used anywhere in the application. For ex. I want to have a settings menu and the menu items defined as nested custom tags. I want to be able to send events from the menu items or menu to the parent context (either the controller in parent directive or whatever).

But I figured out some strange things with scope (maybe I misunderstood something):

<panel title="clock">
    <clock timezone="MST"></clock>
    <clock timezone="MST"></clock>
    <clock timezone="MST"></clock>
</panel>

The following example doesn't fire the event to the parent directive controller when click on the items: http://jsfiddle.net/9VTfR/2/.

But the following works fine: http://jsfiddle.net/9VTfR/3/.

Also I got some strange JS error in the console for both options.

So is it possible to catch the events at any level as the parent directive should be the parent scope as well (not only the parent controller), no? Any help would be appreciated.

Langdon · Accepted Answer · 2013-04-21 23:05:11Z

6

The error you're seeing the console is because you've got Angular included twice in your fiddle (once in External Resources; once in Frameworks & Extensions).

The reason your $scope.$on('clickObject') isn't firing is because both of your directives are siblings and $emit only notifies upwards

From the docs:

Dispatches an event name upwards through the scope hierarchy notifying the registered listeners.

You can use $scope.$parent (like this) but that makes some assumptions about how your directives will be structured. You can also use $rootScope (like this), there's a rare chance you'll run into conflicts if you don't use unique-enough event names.

edited Apr 21, 2013 at 23:05

answered Apr 21, 2013 at 22:56

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

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

2 Comments

Alexander Kalinovski Over a year ago

Ok. I understand. Thanks. I didn't know about this: In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. And I thought that if I use nested directives they have a parent-child relationship.

Langdon Over a year ago

Ya, it doesn't appear transclusion modifies scope. If your <clock> elements were inside of your panel's template I imagine the relationships would be as you'd expect.

Collectives™ on Stack Overflow

AngularJS: sending events from the isolated 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