Question

我知道有一些类似于此的帖子，但我根本无法按照预期让他们中的任何一个为我工作。我正在尝试设置一个事件处理程序来监听特定范围内的位置更改。代码如下所示：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="verifyViewChange">
    <a href="SwitchToThis.html">Test</a>
</div>

<script>
    var app = angular.module('myApp', []);

    app.controller('verifyViewChange', function ($location, $scope) {
        $scope.$on('$locationChangeStart', function (event) {
            event.preventDefault();
            alert("I'm preventing you from leaving the page");
        });
    });
</script>
</body>
</html>

当我加载页面时，我收到警告，但是没有点击链接。我需要做些什么来使其发挥作用？

Answer 1

你应该使用本地＆＃39; beforeunload＆＃39;将它添加到窗口中的事件。

以下是一个例子：

$scope.addUnloadEvent = function(){
if (window.addEventListener) {
       window.addEventListener("beforeunload", handleUnloadEvent);
   } else {
       //For IE browsers
       window.attachEvent("onbeforeunload", handleUnloadEvent);
   }
}

function handleUnloadEvent(event) {
   event.returnValue = "Your warning text";
};

//Call this when you want to remove the event, example, if users fills necessary info
$scope.removeUnloadEvent = function(){
   if (window.removeEventListener) {
       window.removeEventListener("beforeunload", handleUnloadEvent);
   } else {
       window.detachEvent("onbeforeunload", handleUnloadEvent);
   }
}

//You could add the event when validating a form, for example
$scope.validateForm = function(){
    if($scope.yourform.$invalid){
        $scope.addUnloadEvent();
        return;
    }
    else{
        $scope.removeUnloadEvent();
    }

}

Answer 2

[修复上面]非常棒，只需将此位添加到handleUnloadEvent ...

function handleUnloadEvent(event) {
/*
This bit here theres another bind that says if this fields initial value is 
not the same as its current value add the class of input-changed if it is 
remove the class...so you can flag any page ya want to prompt a dialog based 
on presence of a class on an input.
*/
var changeCheckCount = $('.input-changed').length;
console.log('changeCheckCount',changeCheckCount);
if(changeCheckCount === 0)
{
    $scope.removeUnloadEvent();
}
else if(changeCheckCount > 0)
{
    event.returnValue = "You have Unsaved changes do you really want to leave?";
}

允许您说明是否要重新加载对话框或仅使用类离开页面...假设您也可以通过查找第一个带有.input-changed的对话框来绑定对话框，并在其上添加数据属性和消息显示为对话框。

Answer 3

以下是工作示例，它可能对您有所帮助：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


    <div ng-app="myApp" ng-controller="verifyViewChange">
        <a href="SwitchToThis.html" ng-click="funConfirm()">Test</a>
    </div>

    <script>
        var app = angular.module('myApp', []);     
        app.controller('verifyViewChange', function ($location, $scope) {
           $scope.funConfirm = function () {
                var retVal = confirm("I'm preventing you from leaving the page");
                if (retVal == true) {

                    return false;
                } else {

                   event.preventDefault();
                    return false;

                }
            }

        });
    </script>

离开页面时AngularJS警告

3 个答案: