Updating title tag using AngularJS and UI-Router

Question

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?

I haven't been able to reproduce this issue on the example or my own implementations. Maybe it has to do with the browser being used? — Stephen Smith
– Stephen Smith, Commented Mar 26, 2014 at 1:22
I just tried it now with Chrome 33 and IE 10 and reproduced it in both. — ChrisThomas
– ChrisThomas, Commented Mar 27, 2014 at 2:25
Ah, I see what you mean now. The history titles are all shifted back 1. As soon as you change pages, the last page gets the title of the current page in history. As the bug is present in even the examples, it's probably just a ui-router bug. Open an issue on gh? — Stephen Smith
– Stephen Smith, Commented Mar 27, 2014 at 2:32
When you have opened an issue on gh, please post the link here. Thanks. — swenedo
– swenedo, Commented Mar 27, 2014 at 15:17
I can see you already reported the bug on gh: github.com/angular-ui/ui-router/issues/674 — swenedo
– swenedo, Commented Mar 28, 2014 at 9:52

Community · Accepted Answer · 2017-05-23 12:00:25Z

7

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.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Sep 28, 2014 at 15:50

cwbutler

1,2609 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

salek · Accepted Answer · 2014-07-16 00:32:43Z

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.

I haven't had a chance to try this yet, but does it show the proper title in the browser history?
yes it does show up in history and back forward buttons drop down list

Stepan Riha · Accepted Answer · 2015-05-10 16:41:09Z

1

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.

answered May 10, 2015 at 16:41

Stepan Riha

1,72414 silver badges12 bronze badges

Collectives™ on Stack Overflow

Updating title tag using AngularJS and UI-Router

3 Answers 3

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Linked

Related