如何在两个$broadcast触发后执行代码及多$rootScope.$on调用

嘿，这个需求其实很常见，咱们可以通过追踪事件触发状态的方式来实现——创建一个标记对象记录两个广播是否都已触发，每次收到广播就更新状态并检查条件，满足后再执行你的HTTP请求。

具体实现步骤 #

假设你在需要执行HTTP请求的控制器（比如TargetController）里编写以下代码：

1. 初始化状态标记：定义一个对象来记录两个事件的触发状态

// 初始化事件触发状态，默认都是未触发
var eventTriggered = {
  receivedData: false,
  dataLoaded: false
};

2. 分别监听两个广播事件：给每个广播绑定监听函数，触发时更新对应状态并执行检查逻辑

// 监听receivedData广播
var receivedDataHandler = $rootScope.$on('receivedData', function() {
  eventTriggered.receivedData = true;
  checkIfReady(); // 更新状态后立即检查
});

// 监听dataLoaded广播
var dataLoadedHandler = $rootScope.$on('dataLoaded', function() {
  eventTriggered.dataLoaded = true;
  checkIfReady(); // 更新状态后立即检查
});

3. 编写检查与执行函数：判断两个事件是否都已触发，满足条件就执行HTTP请求

function checkIfReady() {
  // 只有两个事件都触发了，才执行目标逻辑
  if (eventTriggered.receivedData && eventTriggered.dataLoaded) {
    // 这里替换成你的HTTP请求代码
    $http.get('/your-target-api')
      .then(function(response) {
        // 处理请求成功的逻辑
        console.log('数据请求成功:', response.data);
      })
      .catch(function(error) {
        // 处理请求失败的逻辑
        console.error('数据请求失败:', error);
      });

    // 可选：如果只需要执行一次，就取消监听避免重复触发
    receivedDataHandler();
    dataLoadedHandler();
  }
}

4. 清理监听避免内存泄漏：在控制器销毁时移除所有广播监听

$scope.$on('$destroy', function() {
  receivedDataHandler();
  dataLoadedHandler();
});

扩展场景：支持多次触发 #

如果你希望每次两个广播都触发后都执行请求（而不是只执行一次），只需要在checkIfReady执行完请求后重置状态标记即可：

function checkIfReady() {
  if (eventTriggered.receivedData && eventTriggered.dataLoaded) {
    // HTTP请求逻辑...

    // 重置状态，等待下一次两个事件触发
    eventTriggered.receivedData = false;
    eventTriggered.dataLoaded = false;
  }
}

这种方案的优势在于：

• 不管两个广播的触发顺序如何，只要都触发就会执行逻辑
• 代码简洁易懂，容易维护
• 可以灵活控制是执行一次还是多次

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