使用AngularJS拦截所有点击以警告用户未保存的数据

Question

我有一个很长的形式，客户需要填写。如果他们点击页面上的链接，它将离开该控制器，他们将丢失他们可能已经输入的任何数据。

如果我可以确定表单尚未保存，我如何拦截任何点击页面上的链接，以便我可以询问用户是否要先保存表单？

还没有代码 - 抱歉。非常感谢。

Answer 1

我编写了一个angularjs指令，您可以将其应用于任何会自动监视更改的表单，并在用户重新加载页面或离开时向用户发送消息。 @see https://github.com/facultymatt/angular-unsavedChanges

希望你发现这个指令很有用！

Answer 2

对于迟到的回答感到抱歉，但是有些人偶然发现了这个并发现它很有用。我遇到了同样的问题，并且在开始时我尝试使用应用于表单元素的ng-dirty类，但因为我有一些自定义控件，当我更改某些字段时，ng-bind不会被应用。

到目前为止，我发现的最佳方法是使用$locationChangeStart事件检测模型的更改时间。

$scope.$on('$locationChangeStart', function (event, next, current) {
    //we are about to leave the page so it's time to see if the form was modified by the user
    if (!$scope.isFormClean())
    {
        event.preventDefault();
    }                    
});