14

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?

ChrisThomas
  • 275
  • 3
  • 12
  • 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 Mar 26 '14 at 01:22
  • I just tried it now with Chrome 33 and IE 10 and reproduced it in both. – ChrisThomas Mar 27 '14 at 02: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 Mar 27 '14 at 02:32
  • When you have opened an issue on gh, please post the link here. Thanks. – swenedo Mar 27 '14 at 15:17
  • 3
    I can see you already reported the bug on gh: https://github.com/angular-ui/ui-router/issues/674 – swenedo Mar 28 '14 at 09:52
  • Its doesnt helps ?http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view – Narek Mamikonyan Jul 02 '14 at 13:44
  • That sets the document title correctly, however the issue here is that the title in the History is not correct. The history item seems to get created after the document title is set. – ChrisThomas Jul 03 '14 at 15:31

3 Answers3

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.

Community
  • 1
  • 1
cwbutler
  • 1,260
  • 9
  • 11
3

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.

salek
  • 444
  • 4
  • 14
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.

Stepan Riha
  • 1,736
  • 14
  • 12