AngularJS$locationChangeStart事件取消路由导航

AngularJS $locationChangeStart Event Cancelling Route Navigations

本文关键字：路由 导航 取消 事件 locationChangeStart AngularJS      更新时间：2023-09-26

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

当AngularJS开始根据通过$location服务($location.path((，$location.search(((完成的差异更新浏览器的位置时，将触发$locationChangeStart。

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

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

$routeChangeSuccess 和$locationChangeSuccess的区别在于，$routeChangeSuccess在路由成功更改后触发，$locationChangeSuccess在 URL 更改时但在路由更改之前触发。请注意，这不是所有的 URL 更改，只是以 AngularJS 应用程序可以注册它的方式对 URL 更改进行计时(例如，对 $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(( 函数(例如在控制器中(，也可以使用 $rootScope.$on(((例如在工厂或服务中(。对于此示例，我将对 $on(( 的调用添加到一个函数中，该函数在调用控制器以监视位置更改后立即调用。这意味着您可以将此代码用于该页面的特定控制器，这意味着 html 端没有代码，而是在位置从该特定控制器的页面更改时调用它。

相关文章：