Initially, I can fetch data on first load in the controller like this:
function RankCtrl($scope, $route, $routeParams, Rank) {
$scope.leagues = Rank.query($routeParams)
}
When the route changes, I utilize resolve to retrieve data from the server. Changing the route triggers a JSON request to the server without refreshing the page.
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/rank/:type/:top', {
controller: "RankCtrl",
resolve: {
leagues: function($route, $q, Rank) {
return Rank.query($route.current.params)
}
}
})
$locationProvider.html5Mode(true);
});
I can see that the data is successfully retrieved from the server using Chrome Dev Tools.
However, my question is - where does this data go? I want to assign this data to $scope.leagues in order to update the view (template) based on the new data.
I attempted to use the
$scope.$on('$routeChangeSuccess')
event but it globally triggers all route changes, not just limited to this controller.
$scope.$on('$routeChangeSuccess', function(next, current) {
$scope.leagues = Rank.query($routeParams);
});
Any assistance with this issue would be greatly appreciated.