在 Angular 中，如何确保在广播消息时加载 $broadcast 侦听器

Question

我的 Angular 应用中有两个控制器。当某条数据更新为一个时，它会发送一个 $broadcast 事件，如下所示：

        $scope.updateTableInfo = function (table) {
           $rootScope.$broadcast ("updateTableInfo", table);
        }

在另一个控制器中，设置了一个侦听器来侦听此更新：

       $rootScope.$on ("updateTableInfo", function (event, table) {
              // do stuff here
       });

不幸的是，如果 updateTableInfo() 在第一个控制器中定义后立即被调用，那么第二个控制器还没有准备好监听它，并且错过了更新。如何确保控制器始终可以相互通信？

Answer 1

通过在控制器之间共享服务，您可以避免使用$rootScope，并为您的计时问题实施简单的解决方案。

您需要创建一个非常简单的服务来保存您希望在控制器之间共享的任何数据/方法：

.factory('SomeService', function(){
  var stuff = {
    thingsToDo: []
  };
  // Other data and methods useful for sharing across controllers here
  return stuff;
});

将服务注入两个控制器：

.controller('FirstController', function($scope, SomeService) { ... });
.controller('SecondController', function($scope, SomeService) { ... });

在一个控制器中创建一个方法来改变服务的状态：

$scope.addTask = function(){
   SomeService.thingsToDo.push({task: 'updateTableInfo'});  
};

在另一个控制器中设置一个$watch，一旦控制器加载就会运行，然后继续观察服务的变化：

$scope.$watch(function(){ return SomeService.thingsToDo }, function(val){
  angular.forEach(val, function(todo) {
     console.log("Yawn, I guess it's time to:", todo.task);
  });
  // Need to clear in $timeout to avoid infinite digest error
  $timeout(function(){SomeService.thingsToDo = []});
}, true);

Demo

Answer 2

不要立即调用updateTableInfo函数，而是用$timeout调用它：

$scope.updateTableInfo = function (table) {
   $rootScope.$broadcast ("updateTableInfo", table);
};
$timeout(function(){
   $scope.updateTableInfo(someArgumentForTable);
},1);