Content specific page titles in UI-Router

Question

When using UI-Router, how do you handle content specific page titles?

I can handle normal page titles just fine, for example:

.state('login', {
    url: '/login',
    views: {
        "navbar": {
            template: normalNavbarTemplate
        },
        "content": {
            template: '<login authenticated="(bCtrl.userSession && bCtrl.userSession.isAuthenticated)"></login>'
        }
    },
    title: 'My Website (0.2) - Login'
})

And then:

$rootScope.$on('$stateChangeSuccess', function (evt, toState) {
    $window.document.title = toState.title;
});

But what happens when you want your title to include content specific content, which you are obtaining using resolve?

I guess you can inject $window into your components, and set the title that way, but it feels messy. Are there any nicer recipes for this which I may have missed?

Thanks

Answer 1

You can change the title property inside the resolve:

resolve: {
    content: function($http) {
        return $http.get('some_url').then(function(result) {

            this.self.title = result.data.title; // set the title property to whatever you like

            return result;
        }.bind(this));
    }
}