AngularJS同父组件下子组件间$scope.$emit传值问题咨询

嘿，我来帮你搞定这个AngularJS组件间传值的问题～

1. 是否需要使用$rootScope？ #

完全不需要！因为child1和child2共享同一个父根组件，我们可以直接利用父组件作为事件和数据的中转桥梁，这样既符合AngularJS的作用域设计原则，又能避免$rootScope带来的全局污染、难以调试等问题。

2. 用$scope.$emit()实现myVar从child1到child2的传递 #

$scope.$emit()的作用是向上沿着作用域链发送事件，所以我们需要让child1把事件发送给父组件，再由父组件把数据传递给child2。具体步骤如下：

步骤1：在child1控制器中发送事件 #

当你需要传递myVar时，调用$scope.$emit()发送一个自定义事件，并携带数据：

angular.module('myApp').controller('Child1Controller', ['$scope', function($scope) {
  // 假设myVar是你要传递的整数变量
  $scope.myVar = 42;

  // 触发事件，向上传递给父组件
  $scope.sendMyVar = function() {
    $scope.$emit('myVarTransmit', $scope.myVar);
  };
}]);

步骤2：在父控制器中监听事件并中转 #

父控制器需要监听child1发送的事件，拿到数据后，你有两种灵活的中转方式：

方式A：利用作用域继承（更简单）

把接收到的数据存到父组件的$scope上，child2作为子组件可以直接通过作用域继承访问：

angular.module('myApp').controller('ParentController', ['$scope', function($scope) {
  // 监听child1发送的事件
  $scope.$on('myVarTransmit', function(event, data) {
    // 把数据存到父作用域，child2可以直接访问
    $scope.sharedMyVar = data;
  });
}]);

方式B：用$scope.$broadcast()向下发送事件

如果需要明确触发child2的响应逻辑，可以在父组件中接收到数据后，再向下广播事件：

angular.module('myApp').controller('ParentController', ['$scope', function($scope) {
  $scope.$on('myVarTransmit', function(event, data) {
    // 向下广播事件，传递给所有子组件（包括child2）
    $scope.$broadcast('myVarReceived', data);
  });
}]);

步骤3：在child2控制器中接收数据 #

根据父组件的中转方式，选择对应的接收方式：

对应方式A（作用域继承）：

直接访问父作用域的sharedMyVar，还可以用$watch监听数据变化：

angular.module('myApp').controller('Child2Controller', ['$scope', function($scope) {
  // 用$watch监听父作用域变量的变化
  $scope.$watch('sharedMyVar', function(newVal) {
    if (newVal !== undefined) {
      console.log('从child1收到的myVar:', newVal);
      $scope.child2MyVar = newVal;
    }
  });
}]);

对应方式B（广播事件）：

监听父组件广播的事件，直接获取数据：

angular.module('myApp').controller('Child2Controller', ['$scope', function($scope) {
  // 监听父组件广播的事件
  $scope.$on('myVarReceived', function(event, data) {
    console.log('从child1收到的myVar:', data);
    $scope.child2MyVar = data;
  });
}]);

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