#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 (Тип: обещание) — Разрешается при рендеринге модального параметра.
Что это значит
- когда вы вызываете
$uibModal.open
метод (и передаете ему объект модального определения), вы получите модальный экземпляр - вы можете получить доступ к нескольким обещаниям из модального экземпляра. эти обещания будут действовать в соответствии с тем, что вы делаете с модальным.
- Итак, когда вы
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'
});