How to use events in AngularJS Bootstrap Colorpicker

Question

I cannot understand how events work with Angular Bootstrap Colorpicker . Here is the Plunker I was looking from an example developer. Unfortunately, the developer did not become an example for using events.

Events such as colorpicker-selected , colorpicker-selected-saturation , colorpicker-selected-hue , colorpicker-selected-alpha , colorpicker-shown , colorpicker-closed must be supported. Only one example will be enjoyable.

Base code without any events:

 'use strict'; angular.module('colorApp', ['colorpicker.module']) .controller('MainCtrl', ['$scope', function($scope) { $scope.nonInput = { color: '' }; $scope.resetNonInputColor = function() { $scope.nonInput = { color: '#ffffff' }; }; }]); 

Answer 1

Given that you have an attached ngModel (which seems to be required for the source code ), you simply catch the emitted event with $on in the ancestor of the directive.

 $scope.$on('colorpicker-shown', function(event, colorObject){ console.log(colorObject); }); 

All the events you requested ( colorpicker-selected-alpha , etc.) are available using their original names.