How can i pass extra parameter when color changed?

Question

I want to pass some addition parameter like this when the color changed?

I am using this angularjs color picker.

https://github.com/ruhley/angular-color-picker/

I want to use it like below

<color-picker ng-model="account_type.type_color" options="options" event-api="eventApi(extraParameter)">

<color-picker ng-model="account_type.type_color" options="options" event-api="eventApi">

Can you please help me to solve out this issue?

Answer 1

You can add an attribute (Let's say id) to the component and read it in the onChange callback (using the api).

angular.module('app', ['color.picker']).
controller('ctrl', function($scope) {
  $scope.color = '#FF0000';
  $scope.eventApi = {
    onChange:  function(api, color, $event) {
      const id = api.getElement().attr('id');
      console.log(id, color);
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-color-picker/3.4.8/angularjs-color-picker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-color-picker/3.4.8/angularjs-color-picker.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <color-picker id="cp-1" ng-model="color" options="options" api="api" event-api="eventApi"></color-picker>
</div>

https://stackblitz.com/edit/angularjs-bqe6ht?file=home%2Fhome.controller.js