javascript - AngularJS $locationChangeStart 事件取消路由导航

Question

有人可以帮我了解如何使用 $locationChangeStart 事件吗？我正在制作一个功能，如果用户单击浏览器后退按钮而不保存该特定页面中表单上的数据，模式弹出窗口将显示有未保存的更改并要求用户保存它。我搜索了不同的解释，但我无法理解其中的一些。我试图寻找示例演示，但找不到。顺便说一句，我正在使用 html 和 angularjs 提前致谢

Answer 1

$locationChangeStart 当 AngularJS 开始根据通过 $location 服务($location.path(), $location.search( )).

应用程序可能会监听 $locationChangeStart 事件并调用 preventDefault()。在这种情况下，第二个事件 ($locationChangeSuccess) 将不会广播。

$locationChangeStart 在位置更新时触发。如果未阻止第一个操作，则紧随其后的是 $locationChangeSuccess。

$routeChangeSuccess 和 $locationChangeSuccess 的区别是 $routeChangeSuccess 在路由成功更改后触发，$locationChangeSuccess 在 URL 更改但在路由更改之前触发。请注意，这并不是所有 URL 更改，只是 URL 以 AngularJS 应用程序可以注册的方式更改(例如，对 $location.url() 的 setter 调用)。为此，您使用 scope.$on('$locationChangeSuccess')。

您可以为表单是否保存创建一个标志，然后根据该标志值您可以启动一个弹出窗口，这将通知用户返回导航或留在同一页面上。

我会推荐 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
        });
    }

对于 $locationChangeStart:

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;
}

示例引用:http://youku.io/questions/1862163/angularjs-ui-router-onlocationchangestart-event-preventdefault-does-not-work

要处理 $locationChangeStart 事件，您可以使用 $scope.$on() 函数(例如在 Controller 中)或者您可以使用 $rootScope.$ on() (例如在工厂或服务中)。对于此示例，我将对 $on() 的调用添加到一个函数中，该函数在调用 Controller 以监视位置变化后立即调用。这意味着您可以将该代码用于该页面的特定 Controller ，这意味着当该特定 Controller 页面的位置发生变化时，html 端没有代码而是被调用。