I have an app that has a toolbar as in Angular Material suggests. This toolbar has only, for now, a title.
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>{{pageTitle}}</span>
</h2>
</div>
</md-toolbar>
And I have the following structure on my ui-router state configuration:
$stateProvider
.state('app', {
url: '/',
views: {
'nav': {
templateUrl: baseUrl + 'home/views/partials/ufa-toolbar.html',
controller: 'navController'
},
'content': {
templateUrl: baseUrl + 'home/views/partials/ufa-content.html',
controller: 'ufaController'
}
},
resolve: {
title: function() {
return 'Home'
}
}
})
.state('app.accounts', {
abstract: true,
url: 'accounts/',
controller: 'accountsController'
})
.state('app.accounts.login', {
url: 'login',
views: {
'content@': {
templateUrl: baseUrl + 'accounts/views/partials/ufa-login-content.html',
controller: 'loginController'
}
},
resolve: {
title: function() {
return 'Login'
}
}
})
What I want to do is resolve in every child state, the page title. But it seems that the navController
is loaded once and only. If I navigate through states it won't load again and resolve the title
as I want to do.
I think it would be possible to use in every child state a view nav@
referecing to the parent view with its custom html
. But for now, the effort of creating html
templates to just change the name doesn't look efficient for me.
The navController
looks like this:
.controller('navController', ['$scope', '$state', 'title', function ($scope, $state, title)
{
$scope.pageTitle = title;
}])
The bottle line: is it possible to resolve a title attribute while changing child states that does not contain its own custom view but it is under a parent state.