AngularJS使用$broadcast/$on传值时接收data为undefined怎么解决

• 优先排查事件时序问题：90%以上的该类问题都是广播触发早于监听注册导致。在发送端广播前加console.log('触发searchString广播')，在接收端$on注册代码前加console.log('注册searchString监听')，观察控制台打印顺序。如果广播打印在前，说明第二个控制器还没完成初始化、没注册上监听就发了事件，自然拿不到参数。
  该场景的解决方法：
  1. 调整两个控制器的加载顺序，保证接收端控制器先初始化
  2. 把广播逻辑用$timeout包一层延迟触发，等待所有控制器初始化完成，示例代码：

  var search = $scope.searchString; 
  $timeout(function() {
    $rootScope.$broadcast('searchString', search);
  }, 0);
  

• 排查监听绑定的作用域是否失效：如果第二个控制器在广播触发前已经被销毁（比如路由跳转、组件卸载），绑定在$scope上的监听会被自动清除。可以改成绑定在$rootScope上，同时注意控制器销毁时手动解绑避免内存泄漏，接收端示例代码：

  var offSearchEvent = $rootScope.$on('searchString', function(events, data){
    console.log("data", data);
  });
  $scope.$on('$destroy', offSearchEvent);
  

• 排查事件被提前拦截：全局搜索所有注册了searchString事件的代码，检查是否有地方调用了event.stopPropagation()阻止了事件向下冒泡，导致后续监听拿不到参数。
• 低版本AngularJS兼容处理：部分1.2.x及更早的AngularJS版本存在基础类型参数传递异常的bug，可以把参数用对象包裹后传递，发送端示例：

  $rootScope.$broadcast('searchString', { content: search });
  

  接收端取值data.content即可。

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