角度計時週期

Question

我想根據farbtastic color picker創建一個顏色選擇器。我想要實現的是添加我想鏈接到色輪的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操作代碼，不屬於控制器，應始終被放置在指令