美文网首页
如何在Angular项目里监听页面关闭、跳转事件?

如何在Angular项目里监听页面关闭、跳转事件?

作者: Mike_Gu | 来源:发表于2017-01-03 16:12 被阅读1824次

    在用户操作网页时,我们有时需要监听用户关闭或者跳转网页的行为,比如像在线编辑工具,如果用户没有提交、保存就关闭页面,那一切更新的数据都会丢失,如何防止这一现象发生?本文提供了一种解决办法,但不是很友好,不得已而为之。

    关于页面/浏览器关闭事件,onbeforeunload依旧可行,不过如果使用者禁止了这一事件,那就改换别的办法吧。

    关于页面跳转,也就是网址发生变化,如果要监听路由变化,有两种情况:

    1. 用ng-route路由,就使用$locationChangeStart事件:
      $scope.$on('$locationChangeStart', function( event ) {
      var answer = confirm("Are you sure you want to leave this page?")
      if (!answer) {
      event.preventDefault();
      }
      });
      2.用ui-route路由,就使用$stateChangeStart事件:
      $scope.$on('$stateChangeStart', function(event) {
      var answer = confirm("确定不保存么?");
      if (!answer) {
      event.preventDefault();
      }
      });

    **补充:

    A: 如何去掉上面两个函数监听呢?(比如用户保存完之后)

    1.再写一个onbeforeunload事件,事件中什么都不放置,可以让用户保存之后触发此事件;

    2.将$locationChangeStart或者$stateChangeStart事件放在一个全局变量中,比如vm.stopListener,之后在用户触发的事件中调用一次vm.stopListener()即可。

    相关文章

      网友评论

          本文标题:如何在Angular项目里监听页面关闭、跳转事件?

          本文链接:https://www.haomeiwen.com/subject/msknvttx.html