In my index.html <head>
I have the following element:
<link
rel="alternate"
type="application/rss+xml"
title="{{feedJobsTagName}} jobs feed"
href="{{feedJobTagsUrl}}"
ng-if="feedJobTagsUrl">
When I change routes to a new tag, I have a resolver that fetches the tag and updates the two properties on the root scope (TagShowCtrl
):
$rootScope.feedJobTagsUrl = '/feeds/jobs/'+tag.type+'s/'+tag.nameLower;
$rootScope.feedJobsTagName = tag.name;
If I refresh the page, I get the correct tag name, however if I just change routes by following links to a new tag name it seems to cache the first name and not update it with the new one:
.when('/tags/:slug/:id', {
templateUrl: 'partials/tags/show',
controller: 'TagShowCtrl',
resolve: {
tag: ['$route', 'Tag', function($route, Tag){
return Tag.get({ id: $route.current.params.id}).$promise;
}]
}
})
To make your changes apply to the view, you have to bind the $routeChangeSuccess
event on the $scope
of your controller.
$scope.$on('$routeChangeSuccess', function(next, current) {
$rootScope.feedJobTagName = "new value";
});
Please mind that it won't work correctly on
$rootScope
inside your controller.
Although your controller's scope is updated, the changes won't apply to the view, because your route's resolve object returns a promise. (See what happens exactly here)
As for all asynchronous tasks, you either need to $apply
the changes to the digest loop or use the events provided by Angular - which is in your case $routeChangeSuccess
.
Mind that the controller is instantiated after the asyncronous get
promise has been fulfilled.