Search code examples
angularjsangular-ui-bootstrapangular-decorator

How to decorate $modalInstance in Angular


Would it be possible or is there currently a way to intercept all modal instances on creation and bind to its promise values?

I would ideally like to create an Angular decorator to do this but there is no $modalInstance provider available on application bootstrap, only $modal is available.

I would like to do this to perform some common system wide operations whenever a modal is opened in my application.

Thanks


Solution

  • I'm not sure if this is optimal solution for this task, but this is how I used to solve this when I had to do the same thing. $modal service defines another helper service called $modalStack which has some useful methods. You can watch its getTop method:

    app.run(function($rootScope, $modalStack) {
        $rootScope.$watch(function() {
            return $modalStack.getTop();
        }, function(newValue, oldValue) {
            if (newValue !== oldValue) {
                if (newValue) {
                    console.log('opened', newValue);
                }
                else {
                    console.log('closed', oldValue);
                }
            }
        });
    });
    

    Demo: http://plnkr.co/edit/sm6jGqlITxgQkRt3EHXN?p=info