等待多个单独的承诺来解决

时间:2016-08-16 19:02:33

标签: javascript jquery angularjs events angular-promise

我在不同的控制器上有角度承诺,并且我想在完成所有功能后执行功能。

有什么方法可以通过事件或承诺来实现这一目标吗?

2 个答案:

答案 0 :(得分:2)

请查看$q的文档,特别是$q.all()

https://docs.angularjs.org/api/ng/service/ $ Q

答案 1 :(得分:2)

Angular文档非常清楚如何跨控制器共享数据和方法.... services(和工厂)

如果您发现自己需要协调多个控制器,则表明您需要一项服务。服务可以帮助解决这种情况(以及更多)。

看看这个Plunkr:http://plnkr.co/edit/PXVL8YA3lOk7beSvVe5E?p=preview 并确保打开控制台,以便您可以看到日志消息。

在解决方法A-C之前,服务的方法D将不会执行。

MyService.$inject = ['$q', '$timeout'];
function MyService($q, $timeout) {
  var MyService = this;

  var deferredA = $q.defer();
  var deferredB = $q.defer();
  var deferredC = $q.defer();

  // go ahead and call method D right away
  // it won't fire until all the other methods have completed
  methodD(); 

  MyService.methodA = function() {
    $timeout(function() {
      deferredA.resolve();
      console.log("Method A end!");
    }, 1000);
    console.log("Method A begin!");
  };

  MyService.methodB = function() {
    $timeout(function() {
      deferredB.resolve();
      console.log("Method B end!");
    }, 1000);
    console.log("Method B begin!");
  };

  MyService.methodC = function() {
   $timeout(function() {
      deferredC.resolve();
      console.log("Method C end!");
    }, 1000);
    console.log("Method C begin!");
  };

  function methodD() {
    $q.all([deferredA.promise, deferredB.promise, deferredC.promise]).then(function() {
      console.log("Method D called!");

      // reset all the promises and call method D again
      deferredA = $q.defer();
      deferredB = $q.defer();
      deferredC = $q.defer();
      methodD();
    });
  }
}

每个控制器都可以在任何时间点呼叫服务。方法D仅在所有控制器都已呼入时执行,并且它们各自的承诺已经解决。

  Ctrl1.$inject = ['$scope', 'MyService'];
  function Ctrl1($scope, MyService) {
    $scope.go = function() {
      MyService.methodA();
    };
  }

  Ctrl2.$inject = ['$scope', 'MyService'];
  function Ctrl2($scope, MyService) {
    $scope.go = function() {
      MyService.methodB();
    };
  }

  Ctrl3.$inject = ['$scope', 'MyService'];
  function Ctrl3($scope, MyService) {
    $scope.go = function() {
      MyService.methodC();
    };
  }