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已在进行中”错误，因为$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次，则只有一个后续摘要排队。

有人可能会有更好的方法来实现这一目标，但这可能会让你开始。

从鼠标拖动事件更新角度模型

1 个答案: