I am facing a challenge with transitioning between modal screens
When the button on the screen is clicked, Modal1 opens:
$modal.open({
templateUrl: 'abc.html',
controller: 'abcCtrl',
size: 'lg',
scope: $scope,
});
In Modal1, there is a Next button that, upon click, should close Modal1 and open Modal2:
$scope.validate = function(isValid) {
if (!isValid) {
$scope.errors = 'Please fill-up required fields';
} else {
$scope.errors = '';
$modal.open({
templateUrl: 'Payment.html',
controller: 'PaymentCtrl',
size: 'lg',
scope: $scope,
});
}
};
In Modal2, there is another Next button that, when clicked, should close Modal2 and open Modal3:
$scope.placeOrder = function() {
$scope.cart.abc().then(function(result) {
$modal.open({
templateUrl: 'orderSummary.html',
controller: 'SummaryCtrl',
size: 'lg',
scope: $scope,
resolve: {
items: function() {
return result.data;
}
}
});
},
function(err) {
//error msg
});
};
The issue arises when I add $modalInstance.close to Modal1. When opening Modal2 after closing Modal1, none of the buttons seem to work. Modal3 does not get opened as expected. The exact cause behind this behavior is unknown to me.
Any assistance or insight would be greatly appreciated. Thank you in advance.