Приостановить выполнение, пока AngularUI modal открыт

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(); 
    } 
});