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

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

最佳答案

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

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

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

$ routeChangeSuccess和$ locationChangeSuccess的区别在于，路由成功更改后，$ routeChangeSuccess会触发，URL更改但路径更改之前，会触发$ locationChangeSuccess。请注意，这并不是所有的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端不会调用任何代码，而是会调用该代码。