在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在另一个控制器中设置a ,控制器加载后将运行该控制器,然后继续监视服务中的更改:

$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);

演示