javascript - 等待 Angular JS 中的函数完成

Question

我遇到以下情况:当我的应用程序首次运行时，在 .run 函数中，我发出一个 http 请求来获取“监视器”列表。一旦收到，它就会填充服务中的监视器数组。许多 Controller 使用此服务来共享数据。该服务称为 ZMDataModel。 ZMDataModel 提供了一个名为 isMonitorsLoaded() 的函数。当返回 1 时，我知道监视器数组已填充(并且 http 调用已完成)

现在，我有一个名为 Monitors 的页面，其 Controller 是 zmApp.MonitorCtrl，如下所示。我需要做的，在这个 MonitorCtrl 中基本上是在开始时执行相当于:

while (ZMData.isMonitorsLoaded()!=1);

现在我显然不能这样做，因为它会锁定我的浏览器，并且浏览器一开始就没有机会将 isMonitorLoaded 设置为 1，因此它变成了无限循环。

我知道我需要以某种方式设置超时，但无法完全遵循我需要在 Controller 中执行的操作。我的 Controller 代码如下:

angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function($scope, $http, ZMHttpFactory, ZMDataModel) {

  $scope.monitors = [];
  
            
  console.log("***Waiting for Monitors to load before I proceed");
  // I can't do a tight loop waiting for ZMDataModel.isMonitorsLoaded
  // so some timeout?
  
    $scope.monitors = ZMDataModel.getMonitors();
    
    console.log("I GOT " + $scope.monitors);


$scope.doRefresh = function() {
    console.log("***Pull to Refresh");                                           
    $scope.monitors = [];
    ZMHttpFactory.getMonitors().then(function(data) {
    $scope.monitors = data;
    $scope.$broadcast('scroll.refreshComplete');
    console.log("I GOT " + $scope.monitors);
  });
};
                                               
});

Answer 1

您可以使用 $rootScope.$emit('eventName') ，它的作用类似于为订阅事件的任何人广播事件 $rootScope.$on('eventName' ):

// In your monitor loaded method:
onload: function(){
  //Here you can pass optional information to the listeners
  // for Example an array of monitor or an object
  $rootScope.$emit('MONITORS_LOADED',{
    monitors: getMonitors()   
  });
}

// In your controller:
angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function($rootScope, $scope, $http, ZMHttpFactory, ZMDataModel) {

  $scope.monitors = [];

  $rootScope.$on('MONITOR_LOADED', function(event, data) {  
    $scope.monitors = data;
    // or 
    // $scope.monitors = ZMDataModel.getMonitors();

    console.log("I GOT " + $scope.monitors);
}

$scope.doRefresh = function() {
  //...
 });
};

});