一个 Controller 中的 AngularJS window.onbeforeunload 正在另一个 Controller 上触发

Question

这是我的问题，我有两个 View (View1 和 View2)和每个 View 的 Controller (Ctrl1 和 Ctrl2)。在 View1 中，我试图在用户不保存更改而意外离开页面之前警告用户。

我正在使用 window.onbeforeunload，它工作得很好，但我的问题是，即使我只在一个 Controller 上有 onbeforeunload，该事件似乎也在第二个 Controller 中触发!但我什至没有那个事件。当用户离开页面并且有未保存的更改时，他会收到 onbeforeunload 警告，如果用户解除警报并离开页面，他是否会被带回第二个 View ，如果用户现在尝试离开另一个 View ，我们还会收到有关未保存更改的警告!当情况并非如此!为什么会这样？

我也在使用 $locationChangeStart，它工作得很好，但只有在用户更改路线时，而不是在他们刷新浏览器、点击“返回”或尝试关闭它时，这就是我被迫使用 onbeforeunload (如果您有更好的方法，请告诉我)。任何帮助或更好的方法将不胜感激!

//In this controller I check for window.onbeforeunload
app.controller("Ctrl1", function ($scope, ...)){
  window.onbeforeunload = function (event) {        

    //Check if there was any change, if no changes, then simply let the user leave
    if(!$scope.form.$dirty){
      return;
    }

    var message = 'If you leave this page you are going to lose all unsaved changes, are you sure you want to leave?';
    if (typeof event == 'undefined') {
      event = window.event;
    }
    if (event) {
      event.returnValue = message;
    }
    return message;
  }

  //This works only when user changes routes, not when user refreshes the browsers, goes to previous page or try to close the browser
  $scope.$on('$locationChangeStart', function( event ) {    
    if (!$scope.form.$dirty) return;
    var answer = confirm('If you leave this page you are going to lose all unsaved changes, are you sure you want to leave?')
    if (!answer) {
      event.preventDefault();
    }
  });
}

//This other controller has no window.onbeforeunload, yet the event is triggered here too!
app.controller("Ctrl2", function ($scope, ...)){
  //Other cool stuff ...
}

我尝试使用 $location.path() 检查当前路径以仅在用户处于 View 中时警告用户我希望触发 onbeforeunload，但这似乎有点“hacky”，解决方案是不要在另一个上执行 onbeforeunload Controller 。

我添加了 $location.path() != '/view1' 第一个似乎有效，但对我来说似乎不正确，除了我不仅有两个 View 之外，我还有几个 View ，如果涉及更多 Controller ，这会变得棘手:

app.controller("Ctrl1", function ($scope, ...)){
  window.onbeforeunload = function (event) {        

    //Check if there was any change, if no changes, then simply let the user leave
    if($location.path() != '/view1' || !$scope.form.$dirty){
      return;
    }

    var message = 'If you leave this page you are going to lose all unsaved changes, are you sure you want to leave?';
    if (typeof event == 'undefined') {
      event = window.event;
    }
    if (event) {
      event.returnValue = message;
    }
    return message;
  }

  //This works only when user changes routes, not when user refreshes the browsers, goes to previous page or try to close the browser
  $scope.$on('$locationChangeStart', function( event ) {    
    if (!$scope.form.$dirty) return;
    var answer = confirm('If you leave this page you are going to lose all unsaved changes, are you sure you want to leave?')
    if (!answer) {
      event.preventDefault();
    }
  });
}

Answer 1

当定义它的 Controller 超出范围时取消注册 onbeforeunload 事件:

$scope.$on('$destroy', function() {
    delete window.onbeforeunload;
});