AngularJS UI 路由器 $onLocationChangeStart 事件。PreventDefault 不起作用

Question

当当前页面上有未保存的更改时，我需要一种方法来中断用户导航到新页面。我在这里实现了该解决方案的修改版本:

http://weblogs.asp.net/dwahlin/cancelling-route-navigation-in-angularjs-controllers

但是，我在浏览器中看到的是，一旦用户单击链接， View 就会发生变化，新 Controller 将完全加载，同时显示模态对话框。当用户单击“取消”并触发 event.preventDefault 时，用户只需在新 View 上结束。这很奇怪，因为我读过的所有内容都表明这是公认的方法，而且似乎没有人遇到过这个问题。然而，我一辈子都看不出我的代码有什么问题。

这是主应用程序中用于处理位置更改的函数(ModalService 只是包装了 Angular Bootstrap $modal 服务):

    onRouteChangeOff = $rootScope.$on('$locationChangeStart', routeChange);

    function routeChange(event, newUrl, oldUrl) {
        //Navigate to newUrl if the form isn't dirty
        if (!$rootScope.unsavedChanges) return;

        var modalOptions = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Ignore Changes',
            headerText: 'Unsaved Changes',
            bodyText: 'You have unsaved changes. Leave the page?'
        };

        ModalService.showModal({}, modalOptions).result.then(function () {
                $rootScope.unsavedChanges = false;
                $location.path(newUrl); //Go to page they're interested in
            }
        , function () {
            event.preventDefault();
        });         
        return;
    }

有什么想法吗？

Answer 1

万一其他人遇到这个问题，修复结果非常简单。我将代码移至 stateChangeStart 事件。代码如下所示:

    onRouteChangeOff = $rootScope.$on('$stateChangeStart', routeChange);

    function routeChange(event, newState) {
        //Navigate to newUrl if the form isn't dirty
        if (!$rootScope.unsavedChanges) return;
        event.preventDefault();
        var modalOptions = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Ignore Changes',
            headerText: 'Unsaved Changes',
            bodyText: 'You have unsaved changes. Leave the page?'
        };

        ModalService.showModal({}, modalOptions).result.then(function () {
            $rootScope.unsavedChanges = false;
            $state.go(newState); //Go to page they're interested in
        });
    }