AngularJS取消路线-为什么需要使用$ rootScope？

Question

我有一个表单，我想防止用户导航而不将其数据保存回服务器。 我从这里借来的代码使我可以向$locationChangeStart事件添加一个侦听器。 我将以下代码放入窗体的控制器中，瞧瞧，什么都没发生。

    var cancelRouteListener = $rootScope.$on('$locationChangeStart', checkForUnsavedData);

    function checkForUnsavedData (event, newURL) {
        if (!$scope.form.$dirty) {
            return;
        }

        var proceed = $window.confirm('The page has unsaved changes. Do you want to continue?');

        if (proceed) {
            cancelRouteListener();
            $location.path(newURL);
        }

        event.preventDefault();
        return;
    }

我可以看到代码到达了$location.path()的调用，但是页面导航没有改变。 然后，我出于绝望，尝试在调用$rootScope.$apply()包装该行代码：

$rootScope.$apply(function () {
    $location.path(newURL);
}

瞧，那行得通。 我有几个问题：

1. 为什么需要使用.$apply()函数？ 我以为代码会在$ rootScope的上下文中运行。
2. 我真的需要将此附加到$rootScope吗？ 当表单的路由处于活动状态时，我仅需要此侦听器。

Answer 1

首先，您不是说$apply()吗？ 其次，为什么要在控制器中使用$rootScope而不是$scope来启动摘要循环。 第三，我认为您没有使用正确的逻辑来实现所需的功能。 $locationChangeStart事件表示Angular应用程序中位置更改的开始。 $window.confirm()将在调用event.preventDefault()暂时停止导航。 因此，您应该等待$window.confirm()确认。 如果使用点击取消，则proceed将为假。 如果proceed为false，则调用event.preventDefault() ，否则不执行任何操作。 当应用程序已经导航到该页面时，绝对不需要调用$location.path() 。

我在这里创建了一个Plunk场景：

http://plnkr.co/edit/qfRVDtIlKqQ1p0pZ4oZ1?p=preview