Menu
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?
921
Angular-UI-Router is an AngularJS module used to create routes for AngularJS applications. Routes are an important part of Single-Page-Applications (SPAs) as well as regular applications and Angular-UI-Router provides easy creation and usage of routes in AngularJS.
The ui-sref directive binds a link to a state. If the state has an associated URL , the directive will automatically generate and update the href attribute using the $state. href() method. The equivalent in Angular is RouterLink which lets you link specific routes in your application.
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.
98
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.
28
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
