Question

我目前正在构建一个简单的拖拽和放大器。 drop指令，这样我就可以在屏幕上移动一些SVG内容。目前我还处于早期阶段，但我遇到了一个奇怪的问题，我希望有人可以帮助我。

我有一项维护鼠标状态的服务。目前它只是光标的x和y坐标。我还有一个属性级别指令，它与此服务交互，以便绑定到鼠标移动事件，并在有人移动鼠标时更新服务。这两个项目像冠军一样合作。该指令使服务与鼠标的位置保持同步，并且由于我的服务（真正的工厂）是一个单独的，我可以将这些数据提取到其他指令/控制器中，看看发生了什么。鼠标。

问题在于：我试图允许拖动特定的SVG元素，因此我创建了一个具有两个功能的超简单控制器：a＆＃34; trackDrag＆＃34;开始跟踪和移动特定元素的函数，以及＆＃34; releaseDrag＆＃34;停止跟踪/移动元素（基本上将其放在原处）。

在我的trackDrag函数中，我尝试使用$ scope。$ watch来观察鼠标服务的当前x和y坐标。由于它是一个工厂，这些值在一个函数中返回，我的手表看起来像这样：

$scope.$watch("mouseTrackingService.get()", function(){
     // do some stuff here
});

当我第一次开始拖动一个元素时，这个手表会启动但是当我继续在屏幕上拖动它时它不会触发。在我的＆＃34; releaseDrag＆＃34;功能，我释放观察者，这似乎工作正常。我有点难过为什么我不能看到手表连续发射，即使我可以在服务内部控制写出来，我发现IT正在正确更新。

我已经包含了一个plnkr，其中包含以下示例代码： http://plnkr.co/edit/g3WEgiQWvd9oXCpFEByn?p=preview

如果我只是屈服并使用$ interval，那么这段代码可以工作（例如每隔10ms更新一次位置），但实际上我认为这是一个更少的＆＃34; angular＆＃34;做事方式与约束力。

Answer 1

嗯，我只是愚蠢。我忘记了$ scope。$ watch只能观察范围变量。

我通过在服务周围添加以下包装来修复此问题：

 $scope.currentMouse = function(){
        return mouseTrackingService.get();
    };

然后我可以观看currentMouse：

$scope.$watch(currentMouse(), function(){
             updateMousePosition(target);
             console.log("noticed a change");
        });

当然，在超过半秒拖动之后，这给了我糟糕的Digest错误：未捕获的错误：[$ rootScope：infdig] 10 $ digest（）迭代达成。中止！但这完全是一个不同的问题。

对不起伙计，这里没什么可看的。现在继续:-p

＆＃34; $ watch＆＃34;服务似乎无法可靠地更新

1 个答案: