Angular ui 路由器，标题动态

Question

我如何用post的参数title来显示浏览器的标题？

我在我的路线上使用 pageTitle 参数，但如果直接输入：slug 作为值，则不起作用。

.state('posts',{
    url         : '/blog/:slug',
    templateUrl : 'content/templates/single.html',
    controller  : 'SinglePostController',
    data: {
        pageTitle: 'title'
    },
    access: {
        requiredLogin: false
    }
})

Answer 1

data : {} 设置是静态的。

看到类似的：

Accessing parameters in custom data

如果你想要一些动态功能使用resolve : {}

关于解析

的示例和问答的一些链接

Angularjs ui-router abstract state with resolve

EXTEND：一个简单的 （非常幼稚但有效） 示例如何使用 resolve 和 $rootScope 来管理浏览器标题（check it here ):

$stateProvider
  .state('home', {
      url: "/home",
      templateUrl: 'tpl.html',
      resolve: {
        'title': ['$rootScope', function($rootScope){
          $rootScope.title = "Other title";
        }],
      }
  })
  .state('parent', {
      url: "/parent",
      templateUrl: 'tpl.html',
      resolve: {
        'title': ['$rootScope', function($rootScope){
          $rootScope.title = "Title from Parent";
        }],
      }
  })
  .state('parent.child', { 
      url: "/child",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      resolve: {
        'titleFromChild': ['$rootScope', function($rootScope){
          $rootScope.title = "Title from Child";
        }],
      }
  })

这可能是 html

<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>

  <head>
    <title>{{title}}</title>

试一试here

这里的挑战是 - 从 child 导航到 parent 时要做什么，但可以通过将该设置移至控制器并使用 $scope.$on('detsroy' 来完成...

这里是adjusted plunker

.state('parent.child', { 
      url: "/child",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      // no resolve, just controller fills the target
  })

.controller('ChildCtrl', ['$rootScope', '$scope', function ($rootScope, $scope) { 
  var title = $rootScope.title;
  $rootScope.title = "Title from Child";
  $scope.$on('$destroy', function(){$rootScope.title = title});
}])

Angular ui 路由器，标题动态

Angular ui router, title dynamic

html

state

angularjs

angular-ui-router