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 modal 不能很好地工作，但是您可以看到在用户提交任何输入之前执行已经完成。

Answer 1

你不能只是暂停循环（你可以使用 ES6 生成器）。但是您可以更改遍历数组/对象键的方式。您可以做的是使用函数逐个检查项目，只有在上一个完成时才执行下一个“迭代”。使用 Promise 很容易。

首先，让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();
    }
});