Angular ui路由器，标题动态

Marco Riesco 发表于 Dev

马可·里斯科

如何使用帖子的参数标题来显示浏览器的标题？

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

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

拉迪姆·科勒

该data : {}设置是静态的。

观点差不多：

访问自定义数据中的参数

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

一些链接到示例和有关解决问题的问答

AngularJS UI路由器抽象状态与解决

EXTEND：一个简单的示例（真的很天真，但是可以正常工作）如何使用resolve和$rootScope管理浏览器标题（在此处检查）：

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

在这里尝试

这里的挑战是-在从孩子到父母的导航上该怎么做，但是可以通过将该设置移入控制器并与$scope.$on('detsroy'...一起使用来完成。

这是调整的矮人

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。