Chrome Browser History Issue

[spwizard]

The page titles are changing as should, but when i look at the chrome history it has the url path not the page title in it ?

Any ideas (Version 51.0.2704.84 (64-bit)) Safari and Firefox behave as expected.

[nonplus]

I can't reproduce this issue in the current version of Chrome on my Mac, Version 54.0.2840.71 (64-bit). Can you setup a plunkr to demonstrate the problem?

[spwizard]

Thanks for looking at it https://plnkr.co/edit/lx0qgMnbE4xeFFBji2Eu?p=preview https://run.plnkr.co/9MZi8Jq5p8orHyYj/#/PageTab

Hopefully as you will see if you check the history it does not report the page titles correctly in Chrome, but all is good safari, firefox

[davechisholm]

Any luck with this @nonplus ? I can replicate on Chrome 54 too. Fine on other browsers

[nonplus]

I can reproduce it, but I'm not sure about a foolproof way to fix it. FWIW, when you use the browser back (<-) and forward (->) drop-downs, the proper titles do show up in those navigation menus.

I did notice that if in your app you use <title>{{$title}}</title> instead of <title ng-bind="$title">Application</title>, then Chrome will display the proper $title values in the History menu. However, if you go directly to your application URL, it'll put "{{title}}" as the history title for the first state, which is no good.

The only way I could get something decent in Chrome is to directly set the contents of the title in the place where my code is setting the $rootScope.$title value (e.g. document.getElementsByTagName("title")[0].innerText = title). The history still shows the contents of the <title> tag on direct URL navigation (but this way it can be something nicer than {{$title}}), but once the user starts navigating the app, the proper $title values are recorded in the browser history.

A workaround, for now, can be something like this:

<title>My Application</title>

angular
   .module("app", [...])
   .run(function($rootScope) {
      $rootScope.$watch("$title", function(title) {
         document.getElementsByTagName("title")[0].innerText = title + " - My Application";
      });
   });

Does this work for y'all? If so, I may integrate something along these lines into the plugin.

[spwizard]

Hi thanks for looking at it. The solution works for chrome so i think you should integrate that into the module, I was using ng-bind on my production code i just missed it out on the plunker. Be nice to know why chrome behaves that way but guess it may stay a mystery.

Thanks

[nonplus]

In v0.1.0, this module now directly sets document.title, which addresses the Chrome problems. It is no longer necessary/recommended to have a <title> tag in your HTML document whicen using this module.

By default, document.title is set to $rootScope.$title, but this can be configured via $titleProvider.documentTitle() configuration. See the README for an example.