Binding events from angular directive

Question

I am using this https://github.com/prajwalkman/angular-slider and I am trying to bind the slider events onStart and onMove that seem to be built in to the directive.

The HTML for the module is

<slider floor="0" ceiling="100" step="1" precision="1" ng-model="playhead" id="seekBar"></slider>

and I want to be able to use the events in my controller. I tried:

seekBar.addEventListener('onMove', function(event){...});

but didn't have any luck with that. Can anyone explain how I am supposed to use these events from my controller?

Answer 1

Since you're willing to edit the directive's source, you can inject your own Angular $emit inside of its own internal onMove handler:

// emit 'onMove' up the scope chain
scope.$emit('move');

Then, assuming your controller's scope is the parent of the directive, you can just insert the following into the controller:

$scope.$on('move', function(){
  console.log("move fired");
});

Plunker demo

You might consider debouncing the event handling a bit to avoid excessive responses to the event - whether or not that's useful for you depends on what you're doing.