результат / причина / закрытия / отклонения uibmodalinstance

#twitter-bootstrap #angular-ui-bootstrap

#twitter-начальная загрузка #angular-ui-bootstrap

Вопрос:

Я использую модальности начальной загрузки, но не могу воспользоваться их полной функциональностью.

Мой модал — это, по сути, всплывающее окно редактирования. Итак, у него есть сохранение и отмена.

  • Если это сохранениеd успешно, оно должно закрыться, а затем родительский элемент должен перенаправить на другую страницу.
  • Если это изменение Cancel, оно должно закрыться, но не перенаправляться.

Вещи, которые я действительно не понимаю:

  • что / где я фиксирую «причину», когда она отклоняется
  • если я могу использовать это, чтобы решить, следует ли перенаправлять
  • как closed / result / dismiss работают вместе.

Я просмотрел кучу ответов, и, похоже, я просто не вижу, как они обрабатываются вместе.

         var modalInstance = $uibModal
        .open({
            templateUrl: 'cartModalContent',
            controller: 'cartModalInstanceController',
            controllerAs: 'cartModalVm',
            resolve: {
                payData: vm.PayData
            }
        })
        .closed
            .then(function(){
                    $state.go('layout.package-labels');
             });
        modalInstance.result.then(function () {
            // ??
        });
  

Ответ №1:

Если вы сомневаетесь, всегда обращайтесь к документам. В разделе Modal вы найдете этот текст

Метод open возвращает модальный экземпляр, объект со следующими свойствами:

закрыть (результат) (Тип: функция) — Может использоваться для закрытия модала, передавая результат.

отклонить(причина) (Тип: функция) — Может использоваться для отклонения модала, передавая причину.

результат (тип: обещание) — Разрешается при закрытии модала и отклоняется при отклонении модала.

открыт (тип: обещание) — Разрешается, когда открывается модальный файл после загрузки шаблона содержимого и разрешения всех переменных.

закрыто (тип: обещание) — разрешается, когда модал закрыт и анимация завершена.

rendered (Тип: обещание) — Разрешается при рендеринге модального параметра.

Что это значит

  1. когда вы вызываете $uibModal.open метод (и передаете ему объект модального определения), вы получите модальный экземпляр
  2. вы можете получить доступ к нескольким обещаниям из модального экземпляра. эти обещания будут действовать в соответствии с тем, что вы делаете с модальным.
  3. Итак, когда вы dismiss используете модальное, result обещание будет отклонено, а когда вы close используете модальное, оно разрешится.

Итак, ваш код должен выглядеть примерно так

 var modalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'template.html',
  controller: 'modalCtrl',
  controllerAs: '$ctrl',
  size: size,
  appendTo: parentElem,
  resolve: {
    info: function () {
      return '42';
    }
  }
});

modalInstance.result.then(function (resolvedResponse) {
  $state.go('whereever')
}, function (rejectionResponse) {
  // do something else
});
  

И поскольку ваш вариант использования — это простое диалоговое окно ok / cancel, вы можете использовать встроенные close / dismiss выражения, подобные so

 <button class="btn btn-primary" type="button" ng-click="$close('ok')">OK</button>
<button class="btn btn-warning" type="button" ng-click="$dismiss('cancel')">Cancel</button> 
  

и когда вы закрываете модальный

 modalInstance.result.then(function (resolvedResponse) {
   // resolvedResponse = 'ok'
}, function (rejectionResponse) {
   // rejectionResponse = 'cancel'
});