I am looking to develop a unique color picker that integrates RGB sliders with the farbtastic color picker. Here's the current setup:
app.controller('PickAColorController', function ($scope) {
$('#colorpicker').farbtastic(function (col) {
$scope.$apply(function () {
$scope.color.setColor(col);
});
});
$scope.$watch('color.r', function () {
var color = chroma($scope.color.r, $scope.color.g, $scope.color.b);
var cp = $.farbtastic('#colorpicker');
cp.setColor(color.hex());
})
$scope.color = {
hex:'',
r: 0,
g: 0,
b: 0,
setColor: function (hexCode) {
this.hex = hexCode;
var rgb = chroma(hexCode).rgb();
this.r = rgb[0];
this.g = rgb[1];
this.b = rgb[2];
}
};
});
The setup is functioning well without the watch feature, but upon its inclusion, I encounter the following error:
Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.14/$rootScope/inprog?p0=%24digest
at Error (native)
...
This issue seems to stem from the cyclic nature of color modifications triggering continual watches on variables and ultimately leading to AngularJS error termination. Any suggestions on how to address this cleanly?