javascript - 在 AngularJS 中，如何检测用户何时离开模板/页面？

Question

我正在使用 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...';
});​

Answer 1

我认为您有两个控制器，每个模板一个，如下所示：

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

好吧，当您从一个模板切换到另一个模板时，会触发一个名为 $destroy 的事件，您可以在此处阅读它http://docs.angularjs.org/api/ng.$ro​​otScope.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 被销毁时，将调用事件并清除间隔。

Answer 2

这是在您离开模板时使用的（也提示确认对话框）：

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

Answer 3

如果您使用的是 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
        }]

    });

Answer 4

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

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

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