javascript - Angular + UI Router, changing title on $stateChangeSuccess (event fires too early?) -
i implemented custom page title according ngboilerplate:
https://github.com/ngbp/ngbp/blob/v0.3.1-release/src/app/app.js
.controller( 'appctrl', function appctrl ( $scope, $location ) { $scope.$on('$statechangesuccess', function(event, tostate, toparams, fromstate, fromparams){ if ( angular.isdefined( tostate.data.pagetitle ) ) { $scope.pagetitle = tostate.data.pagetitle + ' | ngboilerplate' ; } }); })
so basically, title changes on each $statechangesuccess
event. problem is, in browser history, saves new title title of last page. instance if @ page title "home" , navigate page title "about", history show "about" last item, navigate correctly "home" when click on it. fear confuse people.
so came "hack", seems solve problem:
.controller( 'appctrl', function appctrl ( $scope, $location ) { var nexttitle = ""; $scope.$on('$locationchangesuccess', function (event, newurl, oldurl) { $scope.pagetitle = nexttitle; }); $scope.$on('$statechangesuccess', function(event, tostate, toparams, fromstate, fromparams){ if ( angular.isdefined( tostate.data.pagetitle ) ) { nexttitle = tostate.data.pagetitle + ' | ngboilerplate' ; } }); })
so now, title save in variable first , assigned scope on $locationchangesuccess
. seems work, don't know how reliable is.
so question is, guess, how correctly. how reliable changing page title, gets it's data current state?
and furthermore out of interest: why doesn't work $statechangesuccess
? there reason why event fires early?
see this answer more generic question of setting page title in ui-router. workaround use $timeout
service run title update asynchronously. function run after current script finishes.
$rootscope.$on("$statechangesuccess", function (event, tostate) { $timeout(function () { // needed ensure title changed *after* url change // ensures history entries correct. $window.document.title = tostate.name; });
});
Comments
Post a Comment