Angular：如何根据函数调用切换路由

Question

我的app.js 中有三个路由，但是当我从创建切换到任何其他路由时，我想检查用户是否有意点击切换或者是错误，所以会有返回弹出窗口询问用户留在页面上或离开页面。在通常情况下，它可以使用以下代码：

window.onbeforeunload = confirmExit;
function confirmExit() {
    return "You have attempted to leave this page. Are you sure?";
}

但由于这是一个 SPA 应用程序，我必须在切换路线时运行此功能：

这是我的路线

testApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/tests', {
        templateUrl: 'partials/list.html',
        controller: 'ListCtrl'
      }).
      when('/tests/:testsId', {
        templateUrl: 'partials/detail.html',
        controller: 'DetailCtrl'
      }).
      when('/create/', {
        templateUrl: 'partials/create.html',
        controller: 'CreateCtrl'
      }).
      otherwise({
        redirectTo: '/tests'
      });
  }]);

非常感谢任何帮助。

Answer 1

我会用一个角度指令来做到这一点：

.directive('confirm', [
    function() {
        return {
            restrict: 'AEC',
            link: function($scope, element) {
                element.bind('click', function(event) {

                        if (!confirm('You have attempted to leave this page. Are you sure?')) {
                            event.preventDefault();
                            return false;
                        }
                });
            }
        };
    }
]);

在您的 HTML 中：

<a href="/route" confirm>link</a>

这样标准的链接重定向将被拦截，并且只有在用户确认后才会发生重定向。

工作小提琴：http://jsfiddle.net/HB7LU/3119/

编辑： 移除 jquery 参考 + jsfiddle 链接

edit2: 用于全局重定向拦截（如退格键或页面上的任何点击链接），请参阅此小提琴http://jsfiddle.net/9MnE9/124/

在这里，我使用$routeChangeStart 来观察任何位置变化。