CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Wylan Osorio
Wylan Osorio

Reputation: 1166

bootstrap modal buttons not firing with single click with event.preventDefault

In angular code, I have a code which validates when $locationChangeStart fired. I have to call event.preventDefault() to cancel it and display a bootstrap modal. However I have to click twice with modal buttons to take effect each buttons action. Below is the code:

$scope.$on('$locationChangeStart', function (event, next, current) {

    if (skipValidation.skipAllowed($scope.filteredQuestions[0])) {
        //some code here
    }
    else {

        event.preventDefault();

        skipValidation.openModal();
    }
});

openModal() function...

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

skipModalContent.html

<script type="text/ng-template" id="skipModalContent.html">
                    <div class="modal-header">
                        <h3 class="modal-title text-warning">Warnung!</h3>
                    </div>
                    <div class="modal-body">
                        Frage ist erforderlich, zu beantworten.
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" type="button" ng-click="continue()">mache trotzdem weiter</button>
                        <button class="btn btn-default" type="button" ng-click="cancel()">schließen</button>
                    </div>
                </script>

skipModalInstance controller...

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

Your help is highly appreciated.

Upvotes: 2

Views: 447

Answers (1)

Wylan Osorio
Wylan Osorio

Reputation: 1166

I finally found the problem. The $locationChangeStart was called twice so two modal was opened.

Upvotes: 1

Related Questions