How to use events in AngularJS Bootstrap Colorpicker

Question

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

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.com/buberdds/angular-bootstrap-colorpicker/blob/master/… ) — DRobinson
– 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 compatible with angularJS directives. Its a kind of "random" handling. — lin
– lin, Commented May 12, 2015 at 13:07

DRobinson · Accepted Answer · 2016-09-20 22:56:29Z

10

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.

edited Sep 20, 2016 at 22:56

answered May 12, 2015 at 13:09

DRobinson

4,49124 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use events in AngularJS Bootstrap Colorpicker

Base code without any events:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Base code without any events:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related