我想创建一个基于 farbtastic color picker 的颜色选择器。我想要实现的是添加我想要链接到色轮的 RGB slider 。这是我到目前为止所拥有的。
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];
}
};
});
没有 watch 它工作正常,但有了它我就明白了
Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.14/$rootScope/inprog?p0=%24digest
at Error (native)
...
我怀疑,这是由于我对颜色的修改触发了我所观察的变量的另一次更改等等......导致了一个循环,如果我没记错的话,在几次运行之后, Angular 会终止这个并且抛出错误。那么你能建议一个干净的方法来解决这个问题吗?
最佳答案
您可以使用$timeout
,它将在内部调用$apply,但会被推送到摘要队列的末尾,从而避免in Progress
错误。
$('#colorpicker').farbtastic(function (col) {
$timeout(function () {
$scope.color.setColor(col);
});
});
不要忘记在 Controller 中注入(inject)$timeout
。
注意 - 像这样的 DOM 操作代码不属于 Controller ,应始终放置在指令中
关于javascript - Angular watch 周期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32810794/