Javascript 在 AngularJS 中，如何检测用户何时离开模板/页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13885718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In AngularJS, how to detect when user leaves template/page?
提问by Curt
I am using the Javascript command: setInterval. I like to stop it when the user leaves the page.
我正在使用 Javascript 命令：setInterval。我喜欢在用户离开页面时停止它。
This code seems to work well: http://jsfiddle.net/PQz5k/
这段代码似乎运行良好：http: //jsfiddle.net/PQz5k/
It detects when a user leaves a page. It executes Javascript code when a user clicks on a link to go to a different HTML page or URL, or if user reloads page.
它检测用户何时离开页面。当用户单击链接以转到不同的 HTML 页面或 URL 或用户重新加载页面时，它会执行 Javascript 代码。
However, it does not work when I go from one AngularJS template to another. As an example, if I am at template1.html, I want the Javascript code to do something in Controller1.js when the user leaves template1.html to go to template2.html. What is the equivalent of this code below in AngularJS?:
但是，当我从一个 AngularJS 模板转到另一个模板时，它不起作用。例如，如果我在 template1.html，当用户离开 template1.html 转到 template2.html 时，我希望 Javascript 代码在 Controller1.js 中做一些事情。下面这段代码在 AngularJS 中的等价物是什么？：
$(window).on('beforeunload', function() {
return 'Your own message goes here...';
});?
回答by Mathew Berg
I think you have two controllers, one for each template like this:
我认为您有两个控制器，每个模板一个，如下所示：
function Controller_1($scope...){
...
}
function Controller_2($scope...){
...
}
Well, when you switch from one template to another there's an event that's fired called $destroy, you can read up on it here http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy
好吧，当你从一个模板切换到另一个模板时，会触发一个名为 $destroy 的事件，你可以在这里阅读它http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy
Let's say I'm switching from the template with Controller_1 to the template with Controller_2. Controller_1 has an interval I'd like to stop. You can accomplish this with:
假设我从带有 Controller_1 的模板切换到带有 Controller_2 的模板。Controller_1 有一个我想停止的时间间隔。您可以通过以下方式完成此操作：
function Controller_1($scope, $interval...){
var myInterval = $interval(...);
$scope.$on("$destroy", function(){
$interval.cancel(myInterval);
});
}
This will mean that when the $scope for Controller_1 is destroyed, the event will be called and the interval will be cleared.
这意味着当 Controller_1 的 $scope 被销毁时，该事件将被调用并且间隔将被清除。
回答by JoMendez
This is for when you leave a template (also prompt a confirm dialog):
这是当您离开模板时（还会提示确认对话框）：
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);
}
}
});
}
回答by Pranay Dutta
if you are using ui-router then you can use the onExit, property
如果您使用的是 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
}]
});
回答by Luis Saraza
You can use a watcher to check when the location path is changed, something like this:
您可以使用观察者检查位置路径何时更改，如下所示：
$scope.$watch(function(){
return $location.path();
}, function(newPath, oldPath){
//...Do something
})
Then, you can get the old location, and the new location and execute a function or whatever you want,
然后，您可以获取旧位置和新位置并执行函数或任何您想要的，
