Question

＆lt; p＆gt;我正在为ui-router中的每个州添加一个标题：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt; .state（＆＃39; projects＆＃39;，{ 网址：＆＃39; /＆＃39;， templateUrl：＆＃39; projects / projects.html＆＃39;， ncyBreadcrumb：{ 标签：＆＃39;项目＆＃39; }，数据：{title：＆＃39; Projects＆＃39;} }）＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;然后title属性获取该数据：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt;＆lt; title ng-bind =＆＃34; $ state.current.data.title＆＃34;＆gt;＆lt; / title＆gt; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;如何从状态参数中获取数据并将其添加到上例中的标题中？我尝试了以下但没有运气：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt; .state（＆＃39; project＆＃39;，{ 摘要：是的， url：＆＃39; / projects /：projId＆＃39;，解决：{ projId：[＆＃39; $ stateParams＆＃39;，function（$ stateParams）{ return $ stateParams.projId; }] }，控制器：＆＃39; projectCtrl＆＃39;， templateUrl：＆＃39; project / project.html＆＃39;， ncyBreadcrumb：{ 标签：＆＃39;项目＆＃39;，父母：＆＃39;项目＆＃39; }，数据：{title：＆＃39; {{state}}＆＃39;} }）＆LT; /代码＆GT;＆LT; /预＆GT;

Answer 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>

我认为这会有所帮助

Answer 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，请单击右上角蓝色图标 - 新窗口也会更改标题）

Answer 3

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

<强>代码

ui-sref

来自控制器

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

来自HTML

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

UI路由器动态<title>标记

3 个答案: