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'
      };
    };
}]);

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'
      };
    };
}]);

• javascript
• html
• angularjs
• color-picker

• Looking at the source code, it seems like a simple $scope.$on('colorpicker-shown', function(){ /* Your code goes here */ }); would work. (However, an ngModel has to be set up on the directive before it fires: github./buberdds/angular-bootstrap-colorpicker/blob/master/… ) – DRobinson Commented May 12, 2015 at 13:05
• Ohhh yea, its a $rootScope behavior. Please post this as answer, ill mark it as right. Thx m8. This plugin seems not to be patible with angularJS directives. Its a kind of "random" handling. – lin Commented May 12, 2015 at 13:07

1 Answer 1

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.