lin lin - 2 months ago 18
AngularJS Question

How to use events in AngularJS Bootstrap Colorpicker

I can't figure out, how events work with Angular Bootstrap Colorpicker. Here is a Plunker I forked from the developer example. Sadly, the developer made no example for using events.

Events like

colorpicker-selected
,
colorpicker-selected-saturation
,
colorpicker-selected-hue
,
colorpicker-selected-alpha
,
colorpicker-shown
,
colorpicker-closed
should be supported. Just one example would be nice.

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

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

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

All of the events that you asked about (colorpicker-selected-alpha, etc.) are available using their original names.

Comments