离开编辑HTML表单之前提示确认(Prompt confirm before Leaving edi

如果用户试图离开未保存的编辑形式，一个消息框弹出

“这个页面，要求您确认您要离开 - 你已进入可能无法保存数据离开此页面，并留在页面”

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

Answer 1:

术士的答案是有一定道理的，但在这样做，你会伤了可测试性。

在角，你会想用$窗口，你会想看$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:

如果你想取消路由变化，当你确定你的表格是脏的，你可以这样做：

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

这将取消的路由，并保持你的当前页面。

Answer 3:

您可以使用“onbeforeunload”事件。语法如下：

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

本次活动将弹出您在上面询问用户是否真的想离开页面描述了确认对话框。

希望这可以帮助。

Answer 4:

我喜欢@ blesh的答案，但我认为它没有考虑内部URL更改（例如，如果你在你的应用程序中使用ngView和访问不同的内部视图）。 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';
        };
    });
})();