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.

Answer 1

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.