scope.$watch针对哈希对象（关联数组）为何无法触发？

这个问题我之前也踩过坑，本质是AngularJS的$watch监听机制在数组和对象上的表现差异，还有作用域绑定、变量归属的细节问题，我给你一步步拆解：

核心：AngularJS $watch的两种监听模式 #

AngularJS的$watch有两种工作模式，这是你问题的关键：

• 浅监听（默认，第三个参数为false）：只检查被监听对象的引用是否改变。也就是说，只有当你把整个对象/数组替换成新的引用（比如$scope.selectedWells = {}）时，才会触发回调。如果只是修改对象的属性、数组的元素（不替换整个数组），浅监听完全不会察觉。
• 深监听（第三个参数为true）：会递归遍历对象/数组的所有内容，检查值是否发生变化。不管是数组的push/splice，还是对象的属性添加/删除，只要内容变了，就会触发回调。

为什么数组可行，哈希对象不行？ #

数组能触发的原因 #

你第一个例子里用了：

scope.$watch('selectedWells', reloadLegend, true)

第三个参数true开启了深监听，数组的push/splice会直接修改数组的内容，深监听能检测到这些内容变化，所以正常触发回调。

哈希对象没触发的可能原因 #

如果你的$watch还是保持了true参数，但没触发，大概率是这几个坑：

1. 作用域绑定错误
   如果你用的是AngularJS组件（孤立作用域），selectedWells的绑定方式不对。比如用了@（字符串绑定）而不是=（双向绑定）或<（单向绑定，适合引用类型），导致两个组件的selectedWells不是同一个引用。修改属性时，第二个组件的作用域根本感知不到变化。

   正确的组件绑定应该像这样：

   angular.module('myApp').component('secondComponent', {
     bindings: {
       selectedWells: '<' // 单向绑定，引用类型修改属性会同步
     },
     controller: function($scope) {
       $scope.$watch('$ctrl.selectedWells', reloadLegend, true);
       // 注意：组件里应该用$ctrl访问绑定属性，而不是直接用$scope
     }
   });
   

2. 未触发脏检查循环
   如果你的修改操作是在AngularJS上下文之外（比如原生JS事件、setTimeout），Angular的脏检查机制不会自动触发。这种情况需要用$timeout包裹修改逻辑，或者手动调用$scope.$apply()：

   $timeout(function() {
     if (!scope.selectedWells[well]) { 
       scope.selectedWells[well] = scope.values[well]; 
     } else { 
       delete scope.selectedWells[well]; 
     }
   });
   

3. $watch注册时机问题
   如果第二个组件的$watch注册时，selectedWells还是undefined，第一次赋值为{}会触发一次，但后续修改属性是否触发？其实深监听应该能检测到，但如果你的代码里selectedWells被重新赋值过（比如scope.selectedWells = {}），而新对象和旧对象的引用不同，需要确保$watch监听的是最新的引用。

补充示例的问题（currentScreen未触发$watch） #

这个例子的问题非常明显：你定义的currentScreen是局部变量，不是$scope上的属性！$scope.$watch('currentScreen', ...)监听的是$scope.currentScreen，和你外面的局部变量完全是两个东西。当你把currentScreen = data时，$scope.currentScreen根本没变化，自然不会触发回调。

解决方案 #

把currentScreen变成$scope的属性，同时根据需要选择监听模式：

$scope.currentScreen = {};
// 如果需要监听属性变化，开启深监听
$scope.$watch('currentScreen', function() { 
  console.log("screen changed"); 
}, true);

function getDefaultScreen(id) {
 $timeout(function () {
  ScreensService.customShow('get', 'example')
  .then(getScreen)
  .catch(getScreenFailed);
  
  function getScreen(data) {
   console.log(data);
   // 方案1：替换整个引用（适合浅监听）
   $scope.currentScreen = data;
   // 方案2：合并属性（适合深监听，保留原有引用）
   // angular.extend($scope.currentScreen, data);
  }
  
  function getScreenFailed(e) { 
    // 错误处理逻辑
    return $q.reject(e); 
  }
 });
}

内容的提问来源于stack exchange，提问作者AntipolDev