1

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;
        }]
    }
})
chovy
  • 72,281
  • 52
  • 227
  • 295
  • I've solved the similar issue with `` tag following this advice: http://stackoverflow.com/a/26086324/3905211 – kozlice Mar 15 '15 at 02:32

1 Answers1

0

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.

Mohammer
  • 405
  • 3
  • 15