UI 路由器动态 <title>标签 [英] UI Router dynamic &lt;title&gt; tag

问题描述

我像这样为 ui-router 中的每个状态添加一个标题:

I'm adding a title to every state in the ui-router like that:

.state('projects', {
    url: '/',
    templateUrl: 'projects/projects.html',
    ncyBreadcrumb: {
        label: 'Projects'
    },
    data : {title: 'Projects'}
})

然后 title 属性获取该数据:

And then the title attribute takes that data:

<title ng-bind="$state.current.data.title"></title>

如何从状态参数中获取数据并将其添加到上述示例中的标题中?我尝试了以下但没有运气:

How can I take data from the state parameters and add it to the title in the above example? I tried the following with no luck:

.state('project', {
    abstract: true,
    url: '/projects/:projId',
    resolve:{
        projId: ['$stateParams', function($stateParams){
            return $stateParams.projId;
        }]
    },
    controller: 'projectCtrl',
    templateUrl: 'project/project.html',
    ncyBreadcrumb: {
        label: 'Project',
        parent: 'projects'
    },
    data : {title: '{{state}}'}
}) 

推荐答案

您必须在 app.js 文件中使用 app.run() 并在 $rootScope 中分配您的标题.标题.你可以按照这个代码

you have to use app.run() in your app.js file and assign your title in $rootScope.title . you can follow this code

app.run(function($rootScope){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState){

        $rootScope.title=toState.data.title;
    });
});

然后像这样在你的html中绑定变量

after this then bind the variable in your html like this

<title ng-bind="title"></title>

我认为它会有所帮助

这篇关于UI 路由器动态 <title>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！