Invoke the function defined within a modal when dismissing a ui-bootstrap modal

Question

Invoke the function defined within a modal when dismissing a ui-bootstrap modal

Inside my ui-bootstrap modal controller, I have a $watch function set up for a variable. The code snippet looks like this:

main.controller('modalCtrl', ['$scope', '$rootScope', '$modalInstance', 
    function ($scope, $rootScope, $modalInstance) {

        var unregister = $rootScope.$watch(function () { return $rootScope.someVariable; },
                          function (newVal) {
                              if (newVal == false) {
                                  $scope.closeModal();
                              }

                          });
        $scope.closeModal = function () {
            unregister();
            $modalInstance.dismiss('cancel');
        };
}]);

When I dismiss the modal, I want to ensure that the $watch is unregistered. This works fine when using ng-click="closeModal()" in the HTML. However, it does not work when dismissing the modal by clicking outside of it or pressing ESC. Is there a way to call the unregister function on dismissal? I am aware of modal.result.then(close(),dismiss()); but I prefer not to include unnecessary functions in the parent $scope.

javascript angularjs angular-ui-bootstrap bootstrap-modal

Answer 1

Answer №1

To enhance the functionality, simply include an additional callback to the result promise using unregister:

main.controller('modalCtrl', ['$scope', '$rootScope', '$modalInstance', function ($scope, $rootScope, $modalInstance) {

    var unregister = $rootScope.$watch(function () {
        return $rootScope.someVariable;
    }, function (newVal) {
        if (newVal == false) {
            $scope.closeModal();
        }
    });

    $scope.closeModal = function () {
        $modalInstance.dismiss('cancel');
    };

    $modalInstance.result.then(null, unregister);
}]);

By including unregister, it will trigger the callback when either closeModal is executed or the escape key is pressed. Alternatively, you could eliminate $scope.closeModal and utilize ng-click="$dismiss('cancel')" in the template instead.

Answer 2

To enhance the functionality, simply include an additional callback to the result promise using unregister:

main.controller('modalCtrl', ['$scope', '$rootScope', '$modalInstance', function ($scope, $rootScope, $modalInstance) {

    var unregister = $rootScope.$watch(function () {
        return $rootScope.someVariable;
    }, function (newVal) {
        if (newVal == false) {
            $scope.closeModal();
        }
    });

    $scope.closeModal = function () {
        $modalInstance.dismiss('cancel');
    };

    $modalInstance.result.then(null, unregister);
}]);

By including unregister, it will trigger the callback when either closeModal is executed or the escape key is pressed. Alternatively, you could eliminate $scope.closeModal and utilize ng-click="$dismiss('cancel')" in the template instead.

Answer 3

Answer №2

First things first, it's not recommended to store important data on the $rootScope, especially a watched variable for closing a modal. What specific issue are you attempting to address (and what kind of user experience do you aim to achieve) by relying on a watched variable to close your modal? This approach raises concerns and suggests that there may be flaws in your initial design.

Additionally, your comment about avoiding the resolved promise appears confusing. When you invoke $modal.open(options), you receive an object (let's call it modalInstance) onto which you can then execute your promise callback. Therefore, the promise callback operates within the same context as your modalInstance and any accompanying information provided via options.

For proper utilization of the $modal service, please refer to our documentation available here for detailed examples.

Answer 4

First things first, it's not recommended to store important data on the $rootScope, especially a watched variable for closing a modal. What specific issue are you attempting to address (and what kind of user experience do you aim to achieve) by relying on a watched variable to close your modal? This approach raises concerns and suggests that there may be flaws in your initial design.

Additionally, your comment about avoiding the resolved promise appears confusing. When you invoke $modal.open(options), you receive an object (let's call it modalInstance) onto which you can then execute your promise callback. Therefore, the promise callback operates within the same context as your modalInstance and any accompanying information provided via options.

For proper utilization of the $modal service, please refer to our documentation available here for detailed examples.

Invoke the function defined within a modal when dismissing a ui-bootstrap modal

Answer №1

Answer №2

Similar questions

struggling with beginner-level JavaScript issues

How can I prevent a repetitive div from appearing in a JQuery show/hide function?

Combining JSON fields and searching based on the combined value within MarkLogic

Generating references dynamically without the use of strings

Guide to integrating a Custom Font into live data on a PDF file with the help of jsPDF

The HTML document is unable to locate the Angular framework

Modifying the CSS Property of a Non-React Element within a React Application

Can I store a large batch of images in one location and retrieve them using a REST API?

AngularJS modules are not loading dependencies such as constants or controllers

Is it possible to execute a function once another function has been called within a specific interval

Having trouble with Vue.js implementation of Bootstrap tab navigation?

The ng-model does not reflect changes when using the JQuery datepicker

What is causing ngdocs to produce zero files?

Storing information as variables in jQuery

My tests are not passing because I included a compare method in the Array prototype. What steps can I take to fix this issue in either the

Observing the data retrieved from an AJAX request

Ways to eliminate class from HTML code

Displaying the second image twice in a jQuery image slider

Creating a dynamic image carousel using jQuery

Experiencing difficulties when trying to pan and zoom the data obtained from d3.json within a line chart