Angularjs全局变量被作用域监听的正确姿势

AngularJS全局变量的作用域监听：深入理解与实践指南

如果你对结论一知半解，这里有一种正确使用AngularJS全局变量作用域监听的方式：

`$scope.$watch($rootScope.x, function(newVal, oldVal){ //do something })`

很多人可能会疑惑为什么不是 `$rootScope.$watch("x", function(newVal, oldVal){ //do something })`？让我们通过一个最近遇到的bug来这个问题。

在AngularJS中，使用 `$rootScope.$watch` 注册的全局监听会影响到整个应用。假设你的全局变量是订单信息，任何对它的改动都会触发 `$rootScope.$watch`，导致在其他控制器中也触发监听。这与 `$rootScope` 上的 `$broadcast` 功能类似，会全局触发。

这并不是唯一的方式。我们可以深入研究AngularJS的源码来理解更多细节。源码中的 `watch` 方法有一个 `deregisterWatch` 函数，可以用来手动清理监听。例如：

`var watcher = $rootScope.$watch("x", function(){}); //手动清除 watcher watcher();` 同样的方法也适用于 `$scope` 上的 `watch`。

那么问题就来了，在 `$scope` 上的 `watch` 是否会在 `$scope` 被销毁时自动清理呢？通过研究源码中的 `$destroy` 方法，我们发现并不会自动清理。这个方法会禁用监听器、观察者和应用/消化的方法，但并没有明确提到 `watch` 的清理。我们需要手动去清理 `watch`。这就解释了为什么我们更倾向于使用 `$scope.$watch($rootScope.x, function(newVal, oldVal){ //do something })` 的方式，因为这样我们可以更精确地控制监听的范围和生命周期。

正确使用AngularJS的全局变量作用域监听需要我们深入理解其工作原理和源码细节。这需要我们具备一定的调试和源码阅读的能力。希望这篇文章能给大家提供一些有用的信息和指导，如果有任何不当之处，还请各位大侠多多指教。对于文章质量不佳之处，我会继续改进并为大家提供更多有价值的内容。最后感谢大家的阅读和支持！如果你还有其他关于AngularJS的问题或疑问，欢迎继续交流讨论。记得点赞和关注哦！