I have a page in Angularjs, and I am using the routeProvider to control the pages and the URL's for them. (Part of) my routeProvider definition looks something like this:
我在Angularjs中有一个页面,我正在使用routeProvider来控制页面和它们的URL。(部分)我的routeProvider定义如下:
$routeProvider.when("/", {
redirectTo: "/Overview"
}).when("/Overview", {
controller: "OverviewController",
templateUrl:"template/overview.html"
}).when("/Group", {
controller: "GroupController",
templateUrl:"template/group.html"
});
The OverviewController
shows markers for each group on Google Maps, and then GroupController
shows markers for each user in the selected group.
OverviewController在谷歌映射上显示每个组的标记,然后GroupController显示所选组中的每个用户的标记。
Because users often change their position or status, the data in the GroupController
is being refreshed every minute in an interval.
由于用户经常更改他们的位置或状态,组控制器中的数据每隔一分钟就会刷新一次。
dataFactory.getUsers($routeParams.id);
$interval(function(){
dataFactory.getUsers($routeParams.id);
}, 60*1000);
The getUsers()
method in this case will fetch data via Ajax, and then call the appropriate method to show the markers on the map.
在这种情况下,getUsers()方法将通过Ajax获取数据,然后调用适当的方法来显示映射上的标记。
The problem occurs when you go to the /Group
page once, and then navigate back to /Overview
. The interval keeps executing, and the markers on the overview will get overwritten with the markers for the users in the previously viewed group.
当您访问/Group页面一次,然后导航回/Overview时,就会出现问题。该间隔将继续执行,总览上的标记将被覆盖,上面的标记用于先前查看的组中的用户。
I want to add a condition inside the function that's in the $interval
call, that would check if we're on the /Group
page. How would I do that in the Angular way? (instead of checking the window.location.href
string)
我想在函数中添加一个条件在$interval调用中,它会检查我们是否在/Group页面上。我该怎么做呢?(而不是检查窗口。location。href字符串)
2 个解决方案
#1
3
I would go to a different direction. You should stop your interval when leaving the page, instead of adding a condition.
我会走向另一个方向。在离开页面时应该停止间隔,而不是添加一个条件。
var intervalPromise = $interval(function () { /* ... */ }, 5000);
$scope.$on('$destroy', function () { $interval.cancel(intervalPromise); });
This will destroy your timer when you leave the controller.
这将在您离开控制器时销毁您的计时器。
In angular, how to use cancel an $interval on user events, like page change?
在角度上,如何使用取消用户事件的$interval,比如页面更改?
#2
0
You can use $routeChangeStart to track that the page is being redirected to other page.
您可以使用$routeChangeStart跟踪页面正在被重定向到其他页面。
$scope.$on('$routeChangeStart', function(next, current) {
... you could cancel your interval here ...
});
OR
或
You can use any of below to track location change.
您可以使用下面的任何一个来跟踪位置更改。
$locationChangeStart - fires before the location view-model and browser URL are synchronized. $locationChangeSuccess - fires after the location view-model and the browser URL are synchronized.
$locationChangeStart -在location视图模型和浏览器URL同步之前触发。$locationChangeSuccess -在位置视图模型和浏览器URL被同步后触发。
$scope.$on("$locationChangeSuccess",function(event) {
... you could cancel your interval here ...
});
#1
3
I would go to a different direction. You should stop your interval when leaving the page, instead of adding a condition.
我会走向另一个方向。在离开页面时应该停止间隔,而不是添加一个条件。
var intervalPromise = $interval(function () { /* ... */ }, 5000);
$scope.$on('$destroy', function () { $interval.cancel(intervalPromise); });
This will destroy your timer when you leave the controller.
这将在您离开控制器时销毁您的计时器。
In angular, how to use cancel an $interval on user events, like page change?
在角度上,如何使用取消用户事件的$interval,比如页面更改?
#2
0
You can use $routeChangeStart to track that the page is being redirected to other page.
您可以使用$routeChangeStart跟踪页面正在被重定向到其他页面。
$scope.$on('$routeChangeStart', function(next, current) {
... you could cancel your interval here ...
});
OR
或
You can use any of below to track location change.
您可以使用下面的任何一个来跟踪位置更改。
$locationChangeStart - fires before the location view-model and browser URL are synchronized. $locationChangeSuccess - fires after the location view-model and the browser URL are synchronized.
$locationChangeStart -在location视图模型和浏览器URL同步之前触发。$locationChangeSuccess -在位置视图模型和浏览器URL被同步后触发。
$scope.$on("$locationChangeSuccess",function(event) {
... you could cancel your interval here ...
});