在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