Angularjs modal not running code when closing

Question

I am a total AngularJS beginner, and I'm having a hard time getting a modal to behave like I want it to. The problem in short is this: the code within the ".then" part of the modal is being run when opening the modal, not when closing it. See further explanation below my code. I have a button in my index.html that calls a function:

<button type="button" ng-click="addModal()" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus"> Add account</span>
                </button>

My controller definition looks like this:

app.controller('MyController', ['$scope','$http', '$modal',
 'ModalService', function ($scope, $http, $modal, ModalService)

My addModal function within MyController looks like this:

$scope.addModal = function () {
    console.log("addModal");

    ModalService.showModal({
        templateUrl: "/addAccount.html",
        controller: "addController"
    }).then(function(modal) {
        modal.element.modal();
        console.log('asd')
        modal.close.then(function(result) {
            console.log("Modal closed");
            $scope.settings = {};
            $scope.settings.balance = 0;
            $scope.settings.runningTotals = 0;
            $scope.settings.firstName = result.first;
            $scope.settings.lastName = result.last;
            $scope.settings.address = result.add;
            $scope.settings.postcode = result.post;
            $scope.settings.telephone = result.tele;
            $scope.settings.pin = result.pin;


            var json = JSON.stringify($scope.settings);
            console.log(json);
            console.log("Clicked button");

            return $http.post("http://abcmoneygroup.cloudapp.net/Service1.svc/createAccount", json);
        });
    });

I am using this service to create modals. My modalcontroller looks like this:

app.controller('addController', ['$scope','close', '$element', function ($scope, close, $element) {

$scope.first = null;
$scope.last = null;
$scope.add = null;
$scope.post = null;
$scope.tele = null;
$scope.pin = null;

$scope.close = function () {
    console.log('close called')

    close({
        formfirstName: $scope.first,
        formLastName: $scope.last,
        formAddress: $scope.add,
        formPostCode: $scope.post,
        formTelephone: $scope.tele,
        formPin: $scope.pin
    }, 500);

};

    $scope.cancel = function () {
        $element.modal('hide');

        close({

        }, 500);
    };

}]);

Finally addAccount.html contains this button:

<button type="button" class="btn btn-success" ng-click="close()" data-dismiss="modal">
                    <span>Save new account</span>
                </button>

My issue is that when I click "add account"-button the first time, my modal appears. In the console I see two lines: "addModal" and "asd". After I have filled out a form in addAccount.html, I then click the "Save new account"-button. The modal then closes, and in the console I see the following line: "close called". Why isn't the Http.post request being initated now?

If I now click the "Add account"-button again, the modal opens, and I see the following lines in the console:

addModal
Modal closed
{"balance":0,"runningTotals":0}
Clicked button
asd

To conclude, I am wondering why the code within the ".then"-part of my ModalService is being initated every time I open the modal, rather than every time I close it. Any help would be appreciated, cheers!

Thanks for your reply. Where would you put it though? Still inside $scope.addModal? I tried a couple of places, didn't work. — jogorm

amanpurohit amanpurohit · Accepted Answer · 2016-01-25T17:14:29

According to the documentation of angular ui bootstrap result (Type: promise) is resolved when a modal is closed and rejected when a modal is dismissed. To make your code look cleaner i would suggest you to declare a variable modalInstance and then use result to resolve or reject the promise

modalInstance.result.then(function (result) {

  console.log(result);

}, function () {

  console.log('modal dismissed');

});

Angularjs modal not running code when closing

1 Answers