如何用AngularJS $Watch实现父子控制器传值并配置服务？

核心思路 #

用单例共享服务存储需要传递的数据，父子控制器通过依赖注入该服务获取同一数据源，再结合$watch监听数据变化，实现双向同步。

1. 创建共享数据服务（Service） #

服务是AngularJS的单例对象，所有依赖它的控制器共享同一数据实例，这是控制器间数据传递的标准方案。

angular.module('myApp')
  .service('UserSharedDataService', function() {
    // 初始化共享数据
    this.userData = [
      { fname: 'Physics', lname: 'dfg', adress: 'hggdhdf' },
      { fname: 'Chemistry', lname: 'fghdf', adress: 'dhfgfgh' },
      { fname: 'Math', lname: 'fghfgh', adress: 'fhgdfhg' }
    ];

    // 提供修改数据的方法（也可直接修改this.userData）
    this.setUserData = function(newData) {
      this.userData = angular.copy(newData);
    };

    // 获取数据的方法
    this.getUserData = function() {
      return this.userData;
    };
  });

2. 修正父控制器代码 #

注入共享服务，将数据绑定到服务而非局部scope，同时修正$watch的参数错误：

angular.module('myApp', [])
  .controller('ParentController', ['$scope', 'UserSharedDataService', function ($scope, UserSharedDataService) {
    // 将服务的数据绑定到父控制器scope
    $scope.userData = UserSharedDataService.getUserData();

    // 修改数据时更新服务中的数据源
    $scope.getData = function (user) {
      UserSharedDataService.setUserData(user);
    };

    // 监听服务中数据的变化（开启深度监听以捕捉数组/对象内部修改）
    $scope.$watch(function() {
      return UserSharedDataService.userData;
    }, function (newValue, oldValue) {
      if (newValue !== oldValue) {
        $scope.userData = newValue;
        console.log('父控制器数据更新:', newValue);
      }
    }, true);
  }])
  .directive('myParent', function () {
    return {
      templateUrl: 'Parent.html',
      controller: 'ParentController'
    };
  });

3. 修正子控制器代码 #

同样注入共享服务，监听服务数据变化并同步到子控制器scope：

angular.module('myApp')
  .controller('ChildController', ['$scope', 'UserSharedDataService', function($scope, UserSharedDataService) {
    // 初始化绑定服务数据
    $scope.userData = UserSharedDataService.getUserData();

    // 监听服务数据变化
    $scope.$watch(function() {
      return UserSharedDataService.userData;
    }, function (newValue, oldValue) {
      if (newValue !== oldValue) {
        $scope.userData = newValue;
        console.log('子控制器数据更新:', newValue);
      }
    }, true);
  }])
  .directive('myChild', function() {
    return {
      templateUrl: 'Child.html',
      controller: 'ChildController'
    };
  });

关键注意事项 #

• 深度监听：如果监听的是数组或对象，$watch的第三个参数必须设为true，否则只能监听引用地址变化，无法捕捉内部属性/元素的修改。
• 依赖注入正确性：控制器的依赖必须在数组中声明，之前的代码存在注入$rootScope但未在数组中声明的错误，已修正。
• 服务单例特性：所有依赖该服务的控制器共享同一数据实例，修改服务中的数据会同步到所有关联控制器。

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