CODEWITHSUNDEEP
angularjsangular-ui-router
ChrisThomas
ChrisThomas

Reputation: 275

Updating title tag using AngularJS and UI-Router

I am running into a weird issue while trying to set the title of the page using the name of the current state (via ui-router).

Actually, the issue is not with setting the title, the issue is that the title gets set to the title of the next state before the history.pushState. So when I transition to a new url, the first item in the history has the same name as the current page.

I was just playing around with the sample (http://angular-ui.github.io/ui-router/sample/) and I managed to reproduce it there as well. If you click on About, then back on home you will see 2 different entries for 'home'. They both point to the correct url, but their names are mangled. Weirdly enough, clicking through the Contact.list and contact.details sets the history properly.

Is there a way around this? When in the pipeline does the history.pushstate get called?

Upvotes: 14

Views: 9187

Answers (3)

Stepan Riha
Stepan Riha

Reputation: 1724

I wrote the angular-ui-router-title plugin for this. You can use it to update the page title to a static or dynamic value based on the current state. It correctly works with browser history, too.

Upvotes: 1

cwbutler
cwbutler

Reputation: 1260

I had a 'similar' situation... and answered it here.

It basically defines $rootScope.$state = $state inside of the run method of angular. That allows us to access current states info in templates.

<title ng-bind="$state.current.data.pageTitle"></title>

The key is defining it on the $rootScope in the run method.

Upvotes: 7

salek
salek

Reputation: 444

I have a similar situation like yours and I do it like the following. You can put that in your main app run block like following. I had 

 angular.module('myApp').run([
    '$log', '$rootScope', '$window', '$state', '$location',
    function($log, $rootScope, $window, $state, $location) {

        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
            if (toState.title) {
                $rootScope.pageTitle = toState.title;
            }
        });

        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
            // something else 
        });

        $state.go('home');
    }
 ]);

and in the html head i have 

<html class="no-js" class="ng-app" ng-app="..." id="ng-app">
    <head>
     ....
       <title ng-bind="pageTitle"></title>

hope this works for you.

PS: Please consult https://docs.angularjs.org/guide/module for details.

Upvotes: 3

Related Questions