In my Angular code, I have implemented validation logic for when $locationChangeStart is fired. When this event occurs, I need to call event.preventDefault() to stop it and display a Bootstrap modal. However, I am encountering an issue where I have to click the modal buttons twice in order for their actions to take effect. Below is the relevant code snippet:
$scope.$on('$locationChangeStart', function (event, next, current) {
if (skipValidation.skipAllowed($scope.filteredQuestions[0])) {
//some code here
}
else {
event.preventDefault();
skipValidation.openModal();
}
});
Function: openModal()
this.openModal = function (size, locationChange) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'skipModalContent.html',
controller: 'SkipModalInstance',
size: size,
resolve: {
}
});
modalInstance.result.then(function () {
//$log.info('continue');
}, function () {
});
};
Contents of skipModalContent.html:
<script type="text/ng-template" id="skipModalContent.html">
<div class="modal-header">
<h3 class="modal-title text-warning">Warning!</h3>
</div>
<div class="modal-body">
Question must be answered.
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="continue()">Proceed Anyway</button>
<button class="btn btn-default" type="button" ng-click="cancel()">Close</button>
</div>
</script>
Controller: SkipModalInstance
var skipModalInstanceCtrl = function ($scope, $uibModalInstance, $window) {
$scope.continue = function () {
$uibModalInstance.close();
$window.skipModal = true;
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
$window.skipModal = false;
};
};
app.controller('SkipModalInstance', skipModalInstanceCtrl);
I would greatly appreciate any assistance with this issue.