AngularJS離開頁面時發出警告

我知道有幾個帖子與此類似，但我根本無法讓他們中的任何人按照我的意圖爲我工作。我正在嘗試設置一個事件處理程序來偵聽特定作用域上的位置更改。代碼如下所示：AngularJS離開頁面時發出警告

<!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>

當我加載頁面時，我收到警告，但沒有點擊鏈接時。我需要做些什麼才能使它工作？

來源

2015-06-01 Rebam1

這裏沒有角度事件，使用本地事件 – charlietfl

@charlietfl但是這個https://docs.angularjs.org/api/ng/service/$location和這個https://docs.angularjs.org /api/ng/type/$rootScope.Scope#$on？ – Rebam1

當你離開頁面時，你並沒有開始一個新的角度路線，那麼你爲什麼會期望那些方法來幫助？ – charlietfl

你應該將它添加到窗口使用本地「beforeunload」事件。

下面是一個例子：

$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(); 
    } 

}

來源

2015-06-01 13:44:51 dcardoso

謝謝。我一定會用這個，如果我不能使用角度來工作:) – Rebam1

編輯一個角度的例子:) – dcardoso

-1

下面的工作例如，它可以幫助你：

<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>

來源

2015-06-01 11:36:19 NewDirection

嗨。你誤解了我的問題。我不希望even.preventDefault（）在我點擊鏈接時啓動，我希望它在用戶試圖遠離範圍時導入。 – Rebam1

它現在修復:) –

的[解決上述]是很大的只是增加了此位到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的對話框來綁定對話框，並且在它上面有一個數據屬性，並將消息顯示爲對話框。

來源

2017-09-06 15:40:48 Joe

AngularJS離開頁面時發出警告

回答

相關問題