Bind data-opacity attribute to scope variable - angularjs

Question

There's a jquery.minicolors pluggin, and there is a angularified version of this plugin that I wish use.
The usage is like so:
On page open data for color picker (hex color and opacity) is retrieved from server.
Then that values is used to "build" colorpicker (so that its color and opacity are equal to values received from server).
Then user may click on picker and change color and opacity. Results must be reflected in corresponding $scope variables.
I have binded color hex value via ng-model and it works like a charm, but I have troubles with opacity. I have tried to use ng-attr- for data-opacity attribute, but when I change manually opacity, results are not "sent" back to scope variable..
<input minicolors="options" ng-model="thecolor" ng-attr-data-opacity="{{opacity}}">
To demonstrate this I have created a plunker demo with description.

Answer 1

The problem is that the input field only binds to color part. If you add a ng-change to your input you will see that this is only fired if you change the color but not when opacity is changed.
You should move your code into a directive. Here you can use the "change" eventHandler from minicolors as describedin another question Minicolors AngularJS and the docs
UPDATE
If you take a look at the code
http://kaihenzler.github.io/angular-minicolors/angular-minicolors.js
It seems like the change event is there but only binds the hex value.
var settings = getSettings();
settings.change = function (hex) {
scope.$apply(function () {
ngModel.$setViewValue(hex);
});
};
I am guessing it should be.
var settings = getSettings();
settings.change = function (hex,opacity) {
scope.$apply(function () {
ngModel.$setViewValue(hex);
});
};
But the opacity is not passed into any value. Seems like a bug in the directive. If you use a console.log(opacity) you can see the value change.
Update 2.
Simple fix for you
settings.change = function (hex,opacity) {
scope.opacity = opacity
scope.$apply(function () {
ngModel.$setViewValue(hex);
});
};

Answer 2

After many attempts I have managed to modify source code to be able to two-way-bind opacity value to variable I desire. Here's a modified plunker.
What I've added:
First, we modify the tag by passing in additional watch-opacity="varname" attribute to define what variable should hold the initial opacity value. This variable will also be changed when we change the opacity slider and viceversa - the opacity slider will change when new data is written into this variable (ex. data received from server).
<input minicolors="options" ng-model="thecolor" data-opacity="" watch-opacity="settings.somewhat.opacity">
Then we get the opacity value from our settings and ask minicolors to use it as opacity for now, or use 1.0 if the variable have no value yet.
var opacity = scope.$eval(attrs.watchOpacity) || "1.0";
element.minicolors('opacity', opacity);
And then we modify our onchange function so that our settings variable for opacity is being updated also when opacity is changed due to opacity slider change:
var settings = getSettings();
settings.change = function (hex, opacity) { // <- fix!
scope.$apply(function () {
ngModel.$setViewValue(hex);
$parse(attrs.watchOpacity).assign(scope, opacity); // <- fix!
});
};
That's it! This way we can define variable for each colorpicker that will hold opacity value and bind any opacity changes via slider to it.

Answer 3

You can use an attribute watch:
(edited)
// Template
<input minicolors="options" ng-model="thecolor">
// Controller:
$("input[minicolors]").each(function() {
var $self = $(this);
$scope.$watch(
function() {
return $self.attr("data-opacity");
},
function(opacity) {
$scope.opacity[ $self.index() ] = opacity;
});
});