首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在AngularJS中,如何检测用户何时离开模板/页面?

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

Stack Overflow用户
提问于 2012-12-15 04:23:37
回答 4查看 70.7K关注 0票数 55

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

这段代码似乎工作得很好:http://jsfiddle.net/PQz5k/

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

但是,当我从一个AngularJS模板转到另一个模板时,它不起作用。例如,如果我在template1.html,当用户离开template1.html转到template2.html时,我希望Javascript代码在Controller1.js中做一些事情。以下代码在AngularJS中的等价物是什么?

代码语言:javascript
复制
$(window).on('beforeunload', function() {
    return 'Your own message goes here...';
});​
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-12-17 23:51:50

我认为你有两个控制器,每个模板一个,如下所示:

代码语言:javascript
复制
function Controller_1($scope...){
    ...
}
function Controller_2($scope...){
    ...
}

好的,当你从一个模板切换到另一个模板时,有一个被触发的名为$destroy的事件,你可以在 http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy上阅读它

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

代码语言:javascript
复制
function Controller_1($scope, $interval...){
    var myInterval = $interval(...);
    $scope.$on("$destroy", function(){
        $interval.cancel(myInterval);
    });
}

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

票数 143
EN

Stack Overflow用户

发布于 2014-12-12 02:57:36

这适用于您离开模板时(也会提示确认对话框):

代码语言:javascript
复制
             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);
                        }
                    }
                });
               }
票数 12
EN

Stack Overflow用户

发布于 2015-09-07 23:37:41

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

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

    });
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13885718

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档