angular strap modal on hide event

283 Views Asked by At

Currently, I m trying to fire an event when I close my modal. I found this plunker with the functionality what I want to create. When I try to recreate this plunker in my own js file, it doesn't seem to work. The code below is a part of my main js file. If a button is pressed this piece of code is fired.

        function editActivity(activityId) {
        var editModal = $modal({
            templateUrl: '/DesktopModules/Name/Angular/ViewModels/main/edit.html',
            locals: {
                activityId: activityId
            },
            controller: 'editCtrl',
            controllerAs: 'vm',
            show: true,
            keyboard: false,
            backdrop: 'static'
        });
        editModal.result.then('modal.hide', function (result) {
            alert("finally")
            if (result === true) {
                // Reload the list if the selected was updated.
                searchActivities();
            }
        });
    return null;
    }

This code creates a modal but I get the following error:

Cannot read property 'then' of undefined
at mainController.editActivity

When I try to close the modal a new error message is given. The code for the closing the modal is:

 function saveActivity() {
        var updateData = {
            Id: vm.EditActivity.Id,
            Zipcode: vm.EditActivity.Zipcode,
            AreaType: vm.EditActivity.AreaType,
            Activities: vm.EditActivity.Activities
        }
        apiService.updateActivity(updateData);
        $modal.close(true);
    }
}

The error message is:

$modal.close is not a function
at editController.saveActivity

I found several quetion related to this subject like this one and this one but none of those solutions seems to work for me. Keep in mind that i m working with angular-strap.


I found a solution after looking of the possible options of modal(site).

One of the options of modal is: Onhide. When the modal is hidden, it will fire a function. My new main js file looks the following:

    function editActivity(activityId) {
        var editModal = $modal({
            templateUrl: '/DesktopModules/name/Cogas/Angular/ViewModels/main/edit.html',
            locals: {
                activityId: activityId
            },
            controller: 'editCtrl',
            controllerAs: 'vm',
            show: true,
            keyboard: false,
            backdrop: 'static',
            onHide: function () {
                searchActivities();
            }
        });
    }

I removed the $modal.close() from the modal js and added hide(). This is probaly not the best way to do this, but it is sufficient for me.

0

There are 0 best solutions below