Question

我正在使用$modal service from angular-ui，但关于promise结构的这个问题并不是特定于该模块的。在这种情况下，我需要按顺序显示未知数量的模态。而不是一次性显示它们我想在显示下一个模态之前等待一个模态的结果。一个原因是如果用户取消一个模态，其余的不会显示。另一个原因是我想基于第一个输入的一些信息来实例化后续的模态控制器。

我已经整理了一个具有我想要的功能的plunker。

我的plunker中的代码是一个令人费解的乱七八糟的传递计数器。有没有更优雅的方法来实现这一目标？

这是一个混乱的部分：

var myarr =[1,2,3,4];

$scope.open = function (size) { 
  var promises = [$q.defer()]
  for (var i=0; i<myarr.length; i++){
    promises.push($q.defer());
  }

  var modalInstance
  openThisModal = function(scope, i){
    return $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      scope: scope,
      size: size,
      resolve: {
        count: function(){ return i;},
      }
    });
  };
  for (var i=0; i<(promises.length-1); i++){
    var deferred = promises[i];
    deferred.promise.then(function(j){
      openThisModal($scope,j).result.then(function(result){ 
        promises[result.count].resolve(result.count+1);
      });
    });
  };
  promises[0].resolve(1);
};

编辑：我更新了plunk以取消一些来回传递。但似乎仍然比我想要的更多的柜台。

Answer 1

只要不是大量的对话框，你可以通过递归来简化它......

  var myarr =[1,2,3,4];

  var openModals = function(size, scope, numbers){
    if (numbers.length === 0) return;

    var nextNumber = numbers[0];

    $modal.open({
      templateUrl: 'myModalContent.html',
      controller: function ($scope, $modalInstance) {
        $scope.ok = function () {
          $modalInstance.close();
        };
        $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
        };
        $scope.number = nextNumber;
      },
      scope: scope,
      size: size,
    }).result.then(function() {
      scope.selected = nextNumber;
      openModals(size, scope, numbers.slice(1));
    });
  };

  $scope.open = function (size) { 
    openModals(size, $scope, myarr);
  };

Plunker

Angularjs嵌套了依赖的承诺

1 个答案: