是否可以进行自定义“离开页面”确认？

Question

我希望能够暂停执行，显示一个对话框，然后当按下某个按钮时，继续执行。

因此，如果用户在我的表单上，然后单击指向不同路线的链接，我希望显示我的对话框，然后如果他们点击该对话框上的确认按钮，则路线继续。

所以我知道有一个 $routeChangeStart 并且它有下一个路由作为第一个参数，但它只包含偶数的名称和一些范围。您可以使用 preventDefault 来停止路由，但我想知道是否有办法在以后继续路由？

所以最好在 routeChangeStart 中执行 event.preventDefault()，然后存储下一个，然后在用户点击确认后，我会选择“下一个”并重做路由。

如何重做路线？ 我知道我可以使用 params 对象和 $location 在 originalPath 上执行 str_replace，但我想知道是否有更直接的方法来重新应用路由更改？

Answer 1

恐怕你无法避免字符串解析。

如果您想异步处理确认，您需要确实默认阻​​止该事件，请求用户确认，如果获得批准，设置一个标志并使用$location.url(...) 导航到请求的页面。

app.controller('myCtrl', function ($location, $scope, UserConfirm) {
    $scope.$on('$locationChangeStart', function (evt, next, prev) {
        if (!$scope.exitConfirmed) {
            evt.preventDefault();
            var url = extractUrl(prev, next);
            UserConfirm.confirm('Are you sure you want to leave ?').then(
                function (confirmed) {
                    if (confirmed) {
                        $scope.exitConfirmed = true;
                        $location.url(url);
                    }
                }
            );
        }
    });
    ...
});

extractUrl() 函数可能如下所示：

function extractUrl(prevAbsUrl, nextAbsUrl) {
    var idx = prevAbsUrl.length - $location.url().length;
    var withNumSign = nextAbsUrl.substring(idx);
    var pureUrl = withNumSign.substring(withNumSign.indexOf('/'));
    return pureUrl;
}

---

另请参阅此short demo。

Answer 2

如果您使用 $locationChangeStart，则 next 和 current 只是表示您当前和未来目的地的完整 url 的字符串，因此不需要解析。

所以我的解决方案是：

function confirmLeaving(evt, next, current) {
  if(consideringClosing)  //ok we're allowed to leave now
    return;

  evt.preventDefault();  //Don't leave! Show dialog instead.

  $('#dialogCancel').modal('show');
  consideringClosing = true;  //if we try to leave again while dialog is up, thats fine.
}   

$scope.$on('$locationChangeStart', confirmLeaving);

然后在模式中，我有一个“关闭而不保存”按钮，它会将 $location 返回到项目列表，但现在我已将考虑关闭设置为 true，confirmLeaving 不会阻止用户。在模态中还有一个取消按钮，用于关闭模态并将考虑关闭设置回 false（因此模态将再次显示在 locationChange 上）。