在AngularUI模态打开时暂停执行

Question

我正在循环AngularJS中的一些项目，并使用AngularUI模式询问用户对每个项目的输入。我的问题是，循环完成，所有的模块一次渲染，而无需等待用户。

如何才能让执行等到模态关闭？

我的代码示例：

var listofitems = somelist; 
// loop through each item 
for (var i in listofitems){ 
    if (listofitems[i].id == presetId){ 
     // ask user confirmation in a modal 
     $scope.selections = {'doThis': doThis, 
          'doThat': doThat} 
     var openModal = function() { 
      var modalInstance = $modal.open({ 
       templateUrl: 'confirmationModal.html', 
       controller: confirmationController, 
       resolve: { 
        selections: function() { 
          return $scope.selections; 
        } 
       } 
      }); 

      modalInstance.result.then(function (selections) { 
       doThis = selections.doThis; 
       if (selections.doThat){ 
        doThis = selections.doThis; 
       } 
      }); 
     } 
     // open the modal 
     openModal();             
     } 
    } 
} 


var confirmationController = function ($scope, $modalInstance, selections) { 

    $scope.selections = selections; 

    $scope.doThis = function() { 
     $scope.selections.doThis = true; 
     $modalInstance.close($scope.selections); 
    }; 

    $scope.doThat = function() { 
     $scope.selections.doThat = true; 
     $modalInstance.close($scope.selections); 
    }; 
}; 

结合@dsfg这里回答是一个Plunkr example。 UI模块不能很好地工作，但您可以在用户提交任何输入之前看到执行完成。

Answer 1

你不能只是暂停循环（你可以可以与ES6发电机）。但是你可以改变你迭代数组/对象键的方式。你可以做的是使用函数逐个检查项目，并且只有当前一个完成时才执行下一个“迭代”。承诺很容易。

首先，使openModal返回承诺，然后创建帮助函数checkItems，该函数将为键数组中的每个项目调用。

var openModal = function() { 
    var modalInstance = $modal.open({ 
     templateUrl: 'confirmationModal.html', 
     controller: confirmationController, 
     resolve: { 
      selections: function() { 
       return $scope.selections; 
      } 
     } 
    }); 

    return modalInstance.result.then(function(selections) { 
     doThis = selections.doThis; 
     if (selections.doThat) { 
      doThis = selections.doThis; 
     } 
    }); 
}; 

var listofitems = somelist; 
var keys = Object.keys(listofitems); 

(function checkItems() { 

    // get the first key and remove it from array 
    var key = keys.shift(); 

    if (listofitems[key].id == presetId) { 
     // ask user confirmation in a modal 
     $scope.selections = { 
      'doThis': doThis, 
      'doThat': doThat 
     } 
     // open the modal 
     openModal().then(function() { 
      if (keys.length) { 
       checkItems(); 
      } 
     }); 
    }  
})(); 

在上例中，项目将被检查，直到第一个承诺被拒绝。如果你想检查所有项目，无论承诺状态如何，然后使用

openModal().finally(function() { 
    if (keys.length) { 
     checkItems(); 
    } 
});