在AngularJS中,如何检测用户何时离开模板/页面?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (44)

我正在使用Javascript命令:setInterval。我希望在用户离开页面时停止它。

它检测用户何时离开页面。当用户点击链接转到不同的HTML页面或URL,或者用户重新加载页面时,它会执行Javascript代码。

但是,当我从一个AngularJS模板转到另一个时,它不起作用。举个例子,如果我在template1.html中,当用户离开template1.html去template2.html时,我想让Javascript代码在Controller1.js中做一些事情。在AngularJS中,下面的代码是什么?

$(window).on('beforeunload', function() {
    return 'Your own message goes here...';
});​
提问于
用户回答回答于

我认为你有两个控制器,每个模板都是这样的:

function Controller_1($scope...){
    ...
}
function Controller_2($scope...){
    ...
}

假设我从Controller_1的模板切换到Controller_2的模板。Controller_1有一个我想停止的时间间隔。你可以通过以下方式完成此操

function Controller_1($scope, $interval...){
    var myInterval = $interval(...);
    $scope.$on("$destroy", function(){
        $interval.cancel(myInterval);
    });
}

这将意味着,当Controller_1的$ scope被销毁时,该事件将被调用并且时间间隔将被清除。

用户回答回答于
             function Controller_1($scope...){
               var myInterval = setInterval(...);
               $scope.$on('$locationChangeStart', function (event, next, current) {
                    console.log(current);

                    if (current.match("\/yourCurrentRoute")) {
                        var answer = confirm("Are you sure you want to leave this page?");
                        if (!answer) {
                            event.preventDefault();
                        }else{
                            clearInterval(myInterval);
                        }
                    }
                });
               }

扫码关注云+社区

领取腾讯云代金券