角手表周期

Question

我想基於法拉第顏色選擇器創建一個顏色選擇器 。 我要實現的目標是添加要鏈接到色輪的RGB滑塊。 到目前為止，這就是我所擁有的。

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];
    }
};
});

沒有手表就可以正常工作，但是有了它

 Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.14/$rootScope/inprog?p0=%24digest
 at Error (native)
 ...

我懷疑這是由於我對顏色的修改觸發了我監視的變量的另一次更改，依此類推...導致了一個循環，如果在幾次運行角度終止后我沒有記錯，這會引發錯誤。 那么，您可以提出一種解決此問題的干凈方法嗎？

Answer 1

您可能可以使用$timeout ，它會在內部調用$ apply，但是會被推送到摘要隊列的末尾，從而避免進行in progress錯誤。

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

不要忘記在控制器中注入$timeout 。

注意：此類DOM操作代碼不屬於控制器，應始終放在指令中