AngularJS UI路由器$ onLocationChangeStart event.PreventDefault不起作用

Question

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

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

但是，我在浏览器中看到的是，一旦用户点击链接，视图就会更改，新控制器会在显示模式对话框时完全加载。当用户点击“取消”时触发了event.preventDefault，用户只会在新视图上结束。这很奇怪，因为我读过的所有内容都表明这是可接受的方法，似乎没有人有这个问题。然而，我不能为我的生活看到我的代码出了什么问题。

这是主应用程序中用于处理位置更改的函数（ModalService只包含角度引导程序$ 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
        });
    }