UI Router 动态 <title> 标签答案

【问题标题】：UI Router dynamic <title> tagUI Router 动态 <title> 标签
【发布时间】：2015-05-13 11:05:01
【问题描述】：

我正在为 ui-router 中的每个状态添加一个标题，如下所示：

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

然后 title 属性获取该数据：

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

如何从状态参数中获取数据并将其添加到上例中的标题中？我尝试了以下方法，但没有成功：

.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}}'}
})

【问题讨论】：

标签： angularjs angular-ui-router title

【解决方案1】：

您必须在 app.js 文件中使用 app.run() 并在 $rootScope.title 中分配您的标题。您可以按照此代码进行操作

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

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

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

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

我觉得会有帮助

【讨论】：

你没有解释如何为toState.data.title设置动态标题
这里是.state('projects', { url: '/', templateUrl: 'projects/projects.html', ncyBreadcrumb: { label: 'Projects' }, data : {title: 'Projects'} }) 的路线，所以从路线上我只是从data.title 获得标题
是的，它的硬编码不是动态的，他问如何将此数据绑定到。所以我只是展示如何做到这一点
我想我很困惑，因为这个{{state}} 对我来说是动态的
其实他没有正确解释问题:D

【解决方案2】：

有a working example

我想说，你快到了。标题可能如下所示：

<title>{{$state.current.data.title}} {{$stateParams.ID}}</title>

让我们有这两种状态：

  .state('parent', {
      url: "/parent",
      templateUrl: 'tpl.html',
      data : { title: 'Title for PARENT' },
  })
  .state('parent.child', { 
      url: "/child/:ID",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      data : { title: 'Title for CHILD' },
  })
  ;

然后这样称呼他们：

<a ui-sref="parent">
<a ui-sref="parent.child({ID:1})">
<a ui-sref="parent.child({ID:2})">

还有这个钩子：

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

所以，重点是，在 $rootScope 中，我们可以同时访问 $state.current 和 $stateParams

检查here （注意，要在单独的窗口中查看 plunker，请单击右上角的蓝色图标 - 新窗口也会更改标题）

【讨论】：

【解决方案3】：

我建议您使用 params 选项而不是使用 data 选项，因为 params 可以是可选的，您可以通过在 $state.go 或 ui-sref 指令中传递参数来动态设置它。

代码

.state('projects', {
    url: '/',
    templateUrl: 'projects/projects.html',
    ncyBreadcrumb: {
        label: 'Projects'
    },
    params: {
        title: { value: null }
    }
});

来自控制器

$state.go('projects', {title: 'Page1'}); //you can change title while calling state

来自 HTML

ui-sref="projects({title: 'Something Else'})"

【讨论】：

@byteSlayer 对你有帮助吗？