AngularJS：父作用域属性被子控制器修改时，另一子控制器$watch未触发

嘿，这个问题绝对是AngularJS新手刚接触作用域原型继承时最容易踩的坑之一，我来给你拆解清楚～

问题根源：AngularJS作用域的原型继承特性 #

AngularJS的子作用域（比如你的FirstChildCtrl和SecondChildCtrl）是通过原型继承从父作用域（ParentCtrl）继承属性的，但这里有个关键区别：

• 对于原始类型值（字符串、数字、布尔值），子作用域读取时会顺着原型链找到父作用域的属性，但赋值操作会直接在子作用域自身创建一个同名的属性副本，而不是修改父作用域里的原始属性。

对应你的场景分析 #

• 当你在ParentCtrl里修改parentVal时，直接操作的是父作用域本身的属性，FirstChildCtrl里监听的是父作用域的parentVal，所以变化能被监听到，触发回调。
• 但当你在SecondChildCtrl里修改parentVal时，因为parentVal是原始值，AngularJS会在SecondChildCtrl自己的作用域里新建一个parentVal属性，你修改的其实是这个副本，父作用域的parentVal根本没发生变化，自然FirstChildCtrl的监听器不会触发。

解决方法：用引用类型包裹原始值（最佳实践） #

AngularJS社区的最佳解决方案是把原始值放在一个对象里，因为对象是引用类型，子作用域操作的是同一个引用，修改对象里的属性时会直接影响父作用域的对象，这样监听器就能正常工作了。

举个具体的代码示例：

// 父控制器
app.controller('ParentCtrl', function($scope) {
  // 用对象包裹原始值，而不是直接定义原始属性
  $scope.parentData = { val: '初始值' };
});

// 第一个子控制器，监听父作用域对象的属性
app.controller('FirstChildCtrl', function($scope) {
  $scope.$watch('parentData.val', function(newVal, oldVal) {
    console.log('parentData.val 发生变化：', newVal);
  });
});

// 第二个子控制器，修改父作用域对象的属性
app.controller('SecondChildCtrl', function($scope) {
  $scope.updateValue = function() {
    // 这里修改的是父作用域对象里的val，不会创建子作用域副本
    $scope.parentData.val = '来自SecondChildCtrl的修改';
  };
});

不推荐的替代方案：直接使用$parent #

你也可以在子控制器里通过$scope.$parent.parentVal直接修改父作用域的属性，但这种方式不推荐——一旦你的作用域层级发生变化（比如嵌套更深），$parent指向的就不是原来的父作用域了，代码耦合度太高，维护起来很麻烦。

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