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

时间:2012-12-14 20:23:37

标签: javascript angularjs setinterval

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

此代码似乎运行良好:http://jsfiddle.net/PQz5k/

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

但是,当我从一个AngularJS模板转到另一个模板时,它不起作用。举个例子,如果我在template1.html,当用户离开template1.html转到template2.html时,我希望Javascript代码在Controller1.js中执行某些操作。 AngularJS中此代码的等效内容是什么?:

$(window).on('beforeunload', function() {
    return 'Your own message goes here...';
});​

4 个答案:

答案 0 :(得分:134)

我认为你有两个控制器,每个模板对应一个:

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

好吧,当你从一个模板切换到另一个模板时,会发生一个名为$ destroy的事件,你可以在这里阅读 http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

假设我正在使用Controller_1从模板切换到使用Controller_2的模板。 Controller_1有一个我想要停止的间隔。您可以通过以下方式完成此任务:

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

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

答案 1 :(得分:11)

这是在您离开模板时(也提示确认对话框):

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

答案 2 :(得分:6)

如果您使用的是ui-router,那么您可以使用onExit,属性

    $stateProvider.state('foo', {
        url: '/foo',        
        templateUrl: 'views/foo.html',    
        controller: 'fooController',
        onExit: ['$fooService', function($fooService) => {
            $fooService.hide();//do what u want to do here
        }]

    });

答案 3 :(得分:0)

您可以使用观察程序检查位置路径何时更改,如下所示:

$scope.$watch(function(){
    return $location.path();
}, function(newPath, oldPath){
   //...Do something
})

然后,您可以获取旧位置,新位置并执行功能或任何您想要的功能,