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

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

我想你有两个控制器，每个模板一个这样的： 

 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被销毁时，事件将被调用并且间隔将被清除。

这是为了当你离开一个模板（也提示一个确认对话框）： 

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

如果你使用的是路由器，那么你可以使用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 }] });

您可以使用观察器来检查位置path何时更改，如下所示： 

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

然后，你可以得到旧的位置，新的位置和执行一个function或任何你想要的，

Interesting Posts