javascript - Angular watch 周期

Question

我想创建一个基于 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 会终止这个并且抛出错误。那么你能建议一个干净的方法来解决这个问题吗？

Answer 1

您可以使用$timeout，它将在内部调用$apply，但会被推送到摘要队列的末尾，从而避免in Progress错误。

$('#colorpicker').farbtastic(function (col) {
    $timeout(function () {
        $scope.color.setColor(col);
    });
});

不要忘记在 Controller 中注入(inject)$timeout。

注意 - 像这样的 DOM 操作代码不属于 Controller ，应始终放置在指令中