在离开编辑的html表单之前提示确认

Question

如果用户尝试保留未保存的已编辑表单，则会弹出一个消息框

“此页面要求您确认是否要离开 - 您输入的数据可能无法保存。 离开页面并留在页面“

我们可以通过浏览器的一些特殊功能调用此确认框吗？我想在AngularJS应用程序中实现它

Answer 1

术士的回答是部分正确的，但这样做会破坏可测试性。

在Angular中，您需要使用$window，并且您希望在表单上观看$dirty。您需要有一个命名表单，请注意下面的name="myForm"。然后，您可以在$watch：

的表单上$dirty $scope

app.controller('MainCtrl', function($scope, $window) {
  $scope.name = 'World';
  var win = $window;
  $scope.$watch('myForm.$dirty', function(value) {
    if(value) {
      win.onbeforeunload = function(){
        return 'Your message here';
      };
    }
  });
});

HTML

<form name="myForm">
  Name: <input type="text" ng-model="name"/>
</form>

这是一个演示：http://plnkr.co/edit/3NHpU1

的插图

Answer 2

您可以使用＆＃34; onbeforeunload＆＃34;事件。语法如下：

window.onbeforeunload = function () {
    return "Your text string you want displayed in the box";
}

此事件将弹出您上面描述的确认对话框，询问用户是否真的要离开页面。

希望这有帮助。

Answer 3

如果要在确定表单变脏时取消路由更改，可以执行以下操作：

$rootScope.$on('$locationChangeStart', function(event) {
  event.preventDefault();
});

这将取消路由并让您保持当前页面。

Answer 4

我喜欢@ blesh的答案，但我认为它无法解释内部网址更改（例如，如果您在应用程序上使用ngView并访问不同的内部视图）。当hash＃changes改变时，window.onbeforeunload永远不会被调用。在这种情况下，你必须同时监听window.onbeforeunload和$ locationChangeStart：

app.controller('OtherCtrl', ['$scope', '$window', '$location', '$rootScope', function($scope, $window, $location, $rootScope) {
  $scope.message = "This time you get a confirmation.";
  $scope.navigate = function() {
    $location.path("/main");
  }
  var getMessage = function() {
    if($scope.myForm.$dirty) {
      return $scope.message;
    } else {
      return null;
    }
  }
  $window.onbeforeunload = getMessage;
  var $offFunction = $rootScope.$on('$locationChangeStart', function(e) {
    var message = getMessage();
    if(message && !confirm($scope.message)) {
      e.preventDefault();
    } else {
      $offFunction();
    }
  });
}]);

请参阅此处的plunkr：http://plnkr.co/edit/R0Riek?p=preview

Answer 5

使用这个简单的不显眼的代码，您可以使用jQuery轻松保护您的表单。放在</body>结束标记之前。

(function () {
    jQuery('form').one('change', function () {
        window.onbeforeunload = function () {
            return 'Form protection';
        };
    });
})();

Answer 6

我认为你需要使用$window.alert或$window.confirm或才能使用之前

Angular documentation