javascript - Using ng-bind causes Chrome History to show page URLs instead of actual titles -
my title tag:
<title ng-bind="title"></title> when navigate app, page title updated correctly in browser tab. however, when @ history both in chrome , opera, instead of page titles, see raw urls. not case firefox, shows page titles correctly.
i tried adding placeholder title:
<title ng-bind="title">placeholder title</title> but not resolve problem.
you can see in action going website angular material, navigate couple of routes, , check history in chrome or opera, , see like:
https://material.angularjs.org/latest/demo/colors
instead of
angular material - demos > colors.
why happening? how can fixed?
the fix i've found specify title this
<title>{{title}}</title> which makes chrome , opera history show actual titles instead of urls. problem approach first loaded page appear in history title "{{title}}", why use ng-bing="title" instead of {{title}} in first place.
don't know version of angular you're using, tried replicate , fix problem encountered in plunker, here demo: https://run.plnkr.co/yhr3rziiziqxrbzy/#/home
//if link doesn't work go bottom of answer , open plunker, in preview section click on little blue icon in top right corner. in other case won't able see titles.
and code it:
var app = angular.module('plunker', ['ngroute']); app.controller('mainctrl', function($scope, $rootscope) { }); app.controller('homecontroller', function($scope) { }); app.controller('aboutcontroller', function($scope) { }); app.config(function($routeprovider) { $routeprovider. when('/home', { templateurl: 'embedded.home.html', controller: 'homecontroller', title: 'home' }). when('/about', { templateurl: 'embedded.about.html', controller: 'aboutcontroller', title: 'about' }). otherwise({ redirectto: '/home' }); }); app.run(['$rootscope', '$route', function ($rootscope, $route) { $rootscope.titlebase = 'welcome - '; $rootscope.$on('$routechangesuccess', function() { document.title = $rootscope.titlebase + $route.current.title; }); } ] )<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-route.js"></script> <script src="app.js"></script> </head> <body> <script type="text/ng-template" id="embedded.home.html"> <h1> home </h1> </script> <script type="text/ng-template" id="embedded.about.html"> <h1> </h1> </script> <div> <div id="navigation"> <a href="#/home">home</a> <a href="#/about">about</a> </div> <div ng-view></div> </div> </body> </html>here code in plunker: https://plnkr.co/edit/8iz4zjqj75zz3ss0c5de?p=preview
basically, used $rootscope update title , used document.title, unfortunately ng-bind doesn't work browser's history. seems angular picks correctly.
i've found these 2 similar questions:
set page title using ui-router
how change page title in angular using $routeprovider
i sorry in first answer, didn't check browser's history.
Comments
Post a Comment