angularjs - 表单不完整时如何取消 routeChange 或浏览器重新加载？

Question

有这样的场景：

1. 浏览器重新加载，
2. 关闭选项卡
3. 关闭浏览器
4. 路线变更（例如点击链接）
5. 浏览器后退按钮被点击。或 history.go(-1)。3 根手指在 Macbook 上轻扫。

如果用户填写了某种表格或正在写作中，我们会想要阻止这种情况。

我编写了这段代码，它工作得很好，但如果我不能在几个文本字段上实现它，它绝对没有用。目前它只检查我们是否在#/write url。它不检查任何输入。

处理这个问题的角度方法是什么？检查目标文本字段的最佳方法是什么。指令是解决方案吗？就像是：

<input type="text" warningOnLeave ng-model="title"/>

或者

<form warningOnLeave name="myForm">...</form>


 $rootScope.$on('$locationChangeStart', function(event, current, previous){

    console.log(current);
    console.log(previous);
    // Prevent route change behaviour
    if(previous == 'http://localhost/#/write' && current != previous){
        var answer = confirm ("You have not saved your text yet. Are you sure you want to leave?");
        if (!answer)
            event.preventDefault();     
    }

});




/** 
   Prevent browser behaviour
*/

window.onbeforeunload = function (e) {
    if(document.URL == 'http://localhost/#/write'){
        e = e || window.event;

        // For IE and Firefox prior to version 4
        if (e) {
            e.returnValue = 'You have not saved your text yet.';
        }

        // For Safari
        return 'You have not saved your text yet.';
    }
    else
        return;
}

Answer 1

Angular 中的表单$dirty具有/$pristine属性，用于标记用户是否与表单控件进行了交互，以及随附的方法$setPristine()。我会将所需的功能基于此功能。考虑：

<form name="theForm" ng-controller="TheCtrl" ...>

这会将表单置于给定名称下的控制器范围内。然后是这样的：

controller("TheCtrl", function($scope, $rootScope) {
    $rootScope.$on('$locationChangeStart', function(event, current, previous) {
        if( $scope.theForm.$dirty ) {
            // here goes the warning logic
        }
    });
});

不要忘记$scope.theForm.$setPristine()在适当的地方打电话（即在提交或清除后）。

对于窗口卸载情况，您将必须注意$dirty标志。所以在之前的控制器中：

$scope.$watch("theForm.$dirty", function(newval) {
    window.myGlobalDirtyFlag = newval;
});

您必须这样做，因为该window.onbeforeunload事件无权访问表单的范围。然后，在应用程序的全局部分：

window.onbeforeunload = function (e) {
    if( window.myGlobalDirtyFlag === true ) {
        // warning logic here
    }
};

同样，您可能希望在作用域被销毁时清除全局脏标志，因此在控制器中：

$scope.$on("$destroy", function() {
    window.myGlobalDirtyFlag = false;
});