AngularJS custom window while changing page

Question

I want to do a custom modal asking if user wants to save changes before leaving a page, using ui.bootstrap.

I'm not using angular route configuration (so i guess i can't use '$locationChangeStart'or '$routeChangeStart').

I can't use window.onbeforeunload as you can't custom the popup window ( apart maybe from the messages displayed ).

Any idea ?

Thank you,

Answer 1

Add a directive, something similar to this:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, el) {
            $(el).click(function(e) {
                e.preventDefault()
                alert('Do your modal stuff here');
            });
        }
    }
});

Here is a working example. You can pass the href to the modal, and if they click through, you can use the href to redirect the page to their final destination.