如何在 AngularJS Bootstrap Colorpicker 中使用事件答案

【问题标题】：How to use events in AngularJS Bootstrap Colorpicker如何在 AngularJS Bootstrap Colorpicker 中使用事件
【发布时间】：2015-07-23 08:59:00
【问题描述】：

我不知道事件如何与Angular Bootstrap Colorpicker 一起工作。这是一个 Plunker 我从开发人员示例中分叉出来的。可悲的是，开发人员没有使用事件的例子。

应该支持colorpicker-selected、colorpicker-selected-saturation、colorpicker-selected-hue、colorpicker-selected-alpha、colorpicker-shown、colorpicker-closed 等事件。举个例子就好了。

没有任何事件的基本代码：

'use strict';

angular.module('colorApp', ['colorpicker.module'])
  .controller('MainCtrl', ['$scope', function($scope) {

    $scope.nonInput = {
      color: ''
    };

    $scope.resetNonInputColor = function() {
      $scope.nonInput = {
        color: '#ffffff'
      };
    };
}]);

【问题讨论】：

查看源代码，似乎一个简单的$scope.$on('colorpicker-shown', function(){ /* Your code goes here */ }); 可以工作。（但是，必须在指令触发之前在指令上设置 ngModel：github.com/buberdds/angular-bootstrap-colorpicker/blob/master/…）
哦，是的，这是$rootScope 的行为。请将此作为答案发布，我将其标记为正确。谢谢m8。这个插件似乎与 angularJS 指令不兼容。它是一种“随机”处理。

标签： javascript html angularjs color-picker

【解决方案1】：

鉴于您附加了一个ngModel（这似乎是必需的，根据source code），您只需在指令的祖先中使用$on 捕获发出的事件。

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

您询问的所有事件（colorpicker-selected-alpha 等）都可以使用其原始名称。

【讨论】：