UI-Router 中的内容特定页面标题

Question

使用 UI-Router 时，您如何处理特定内容的页面标题？

我可以很好地处理普通的页面标题，例如：

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

然后：

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

但是当您希望您的标题包含您使用 resolve 获得的特定内容时会发生什么？

我想你可以在你的组件中注入$window，然后这样设置标题，但感觉很乱。有没有我可能错过的更好的食谱？

谢谢

Answer 1

您可以在解析中更改标题属性：

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));
    }
}

UI-Router 中的内容特定页面标题

Content specific page titles in UI-Router

javascript

routing

page-title

angularjs

angular-ui-router