AngularJS $ locationChangeStart事件取消路线导航

Question

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

Answer 1

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

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

位置更新后，

$ locationChangeStart 将触发。如果未阻止第一个操作，则会出现 $ locationChangeSuccess 。

$ routeChangeSuccess 和 $ locationChangeSuccess 的区别在于 $ routeChangeSuccess <路由成功更改后会触发/ em> ，并且在更改URL但路由更改之前会触发 $ locationChangeSuccess 。请注意，这不是所有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（）函数（例如在控制器中），或者您可以使用$ rootScope。$ on（）（例如在工厂或服务中）。对于这个例子，我已经将$ on（）调用添加到一个函数中，该函数在调用控制器以监视位置更改后立即调用。这意味着您可以将此代码用于该页面的特定控制器，这意味着当位置从该特定控制器页面更改时，html方面没有代码而是调用它。