6

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

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

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

在此处输入图像描述

4

6 回答 6

11

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

在 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

于 2012-11-26T14:15:12.250 回答
5

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

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

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

希望这可以帮助。

于 2012-11-26T14:03:36.360 回答
5

如果您想在确定您的表单脏时取消路由更改，您可以这样做：

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

这将取消路由并让您留在当前页面。

于 2013-02-01T22:14:22.010 回答
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

于 2013-10-22T18:06:43.103 回答
1

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

(function () {
    jQuery('form').one('change', function () {
        window.onbeforeunload = function () {
            return 'Form protection';
        };
    });
})();
于 2016-05-20T08:35:10.187 回答
0

我认为您需要使用$window.alertor$window.confirm或 beforeroutechange

角度文档

于 2012-11-26T14:13:08.987 回答