Definir o título da página usando o roteador da interface do usuário
Estou migrando meu aplicativo baseado no AngularJS para usar o ui-router em vez do roteamento interno. Eu o configurei como mostrado abaixo
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl : 'views/home.html',
data : { pageTitle: 'Home' }
})
.state('about', {
url: '/about',
templateUrl : 'views/about.html',
data : { pageTitle: 'About' }
})
});
Como posso usar a variável pageTitle para definir dinamicamente o título da página? Usando o roteamento embutido, eu poderia fazer
$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
$rootScope.pageTitle = $route.current.data.pageTitle;
});
e, em seguida, vincule a variável em HTML, como mostrado abaixo
<title ng-bind="$root.pageTitle"></title>
Existe um evento semelhante que eu possa conectar usando o ui-router? Notei que existem funções 'onEnter' e 'onExit', mas elas parecem estar vinculadas a cada estado e exigirão que eu repita o código para definir a variável $ rootScope para cada estado.