“$watch”服务似乎没有可靠地更新

Question

我目前正在构建一个简单的拖放指令，以便可以在屏幕上移动一些 SVG 内容。目前我仍处于早期阶段，但我遇到了 $watch 的一个奇怪问题，希望有人能帮助我。

我有一个服务来维护我的鼠标状态。目前它只是光标的 x 和 y 坐标。我还有一个与此服务交互的属性级指令，以便绑定到鼠标移动事件并在有人移动鼠标时更新服务。这两个项目像冠军一样协同工作。该指令使服务与鼠标的位置保持同步，并且由于我的服务（实际上是工厂）是单例的，因此我可以将这些数据拉入其他指令/控制器以查看鼠标的情况。

问题是：我试图允许拖动特定的 SVG 元素，所以我创建了一个超级简单的控制器，它具有两个功能：一个“trackDrag”函数开始跟踪和移动特定元素，以及一个“ releaseDrag”，它停止跟踪/移动元素（基本上将它放在它所在的位置）。

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

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

当我第一次开始拖动元素时，这款手表会触发，但当我继续在屏幕上拖动它时它不会触发。在我的“releaseDrag”函数中，我解除了观察者的分配，这似乎工作正常。尽管我可以在服务内部进行控制台写入并且我看到 IT 正在正确更新，但我对为什么我没有看到手表持续启动感到有些困惑。

我在 plnkr 中包含了一些示例代码，如下所示： http://plnkr.co/edit/g3WEgiQWvd9oXCpFEByn?p=preview

如果我只是让步并使用 $interval，那么这段代码就可以工作（例如，每 10 毫秒更新一次位置），但实际上我认为与绑定相比，这是一种不那么“棱角分明”的做事方式。

Answer 1

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

我通过在服务周围添加以下包装器解决了这个问题：

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

然后我可以观看 currentMouse：

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

当然，在拖了半秒多之后，这给了我可怕的摘要错误： 未捕获的错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！ 但这完全是一个不同的问题。

对不起各位，这里没什么可看的。现在继续前进：-p