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

Exploring MeanJS through the WebStorm debugger

How does a browser decide to load content from an http URL when the frontend source is using an https URL?

Can the execution of a jQuery Timeout function be halted if a user navigates away from the page?

Express JS backend causing CSS file to fail to load in React project

What steps should I take in order to ensure that NPM commands run smoothly within Eclipse?

AngularJS: How to track the number of redirects within an iframe?

Navigating a variety of page styles and views in Angular 1 using routing

Troubling inconsistency in jQuery's .css function performance

What could be the reason behind the malfunction of this jQuery post request?

Issues with sending emails through Nodemailer in a Next.js project using Typescript

Can someone help me figure out how to make my Dropdown stay open when I highlight input, drag, and release

Using the hover event in a jQuery plugin: A step-by-step guide

Tips for showcasing the chosen option from an autocomplete input field in a React application

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

``There seems to be an issue with the redirect header function in the PHP

Sending confidential data from the view to the controller without relying on form submission

NodeJS: The functionality of my node files relies on the variables defined in another file

Loading Google API using AngularJS

Unable to display array retrieved from successful http get request on the webpage

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within