Обновление угловой модели от события перетаскивания мыши

Question

Когда я перетаскиваю элемент, который я нарисовал на холсте, мне также хотелось бы, чтобы его живые x и y координаты отображались за пределами холста.

Беглый описание ..

Вид:

//some HTML, including a canvas 
{{xCoord}} </br> 
{{yCoord}} 

Директива: (onDrag() вызывается всякий раз, когда пользователь нажимает на и перетаскивает объект)

someCanvasObject.onDrag() { 
    $scope.xCoord = canvasObject.x; 
    $scope.yCoord = canvasObject.y; 
    $scope.$digest(); 
} 

Однако, когда я использую $scope.$digest(), чтобы изменить выведенные координаты, я получаю «$ apply уже выполняется» ошибка becau se $digest() быстро вызывается перетаскиванием, быстро изменяя координаты.

Есть ли альтернативный способ использования $digest(), который не будет конфликтовать при быстром использовании описанным выше способом?

(мне сказали, $$phase плохая практика.)

Answer 1

Вы могли бы начать пробовать что-то вроде этого:

var timeout; 
someCanvasObject.onDrag() { 
    $scope.xCoord = canvasObject.x; 
    $scope.yCoord = canvasObject.y; 
    if (timeout) $timeout.cancel(timeout); 
    timeout = $timeout(function() { 
     $scope.$digest(); 
    }); 
} 

Идея заключается в том, что каждый раз, когда запускается событие перетаскивания, вы вызываете дайджест, но если onDrag вызывается 10 раз в течение одного дайджеста, в очередь ставится только один следующий дайджест.

У кого-то, вероятно, будет лучший способ добиться этого, но это может заставить вас начать.