Question

我根据ngBoilerplate实现了自定义页面标题：

https://github.com/ngbp/ngbp/blob/v0.3.1-release/src/app/app.js

.controller( 'AppCtrl', function AppCtrl ( $scope, $location ) {
  $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    if ( angular.isDefined( toState.data.pageTitle ) ) {
      $scope.pageTitle = toState.data.pageTitle + ' | ngBoilerplate' ;
    }
  });
})

基本上，标题会在每个$stateChangeSuccess事件中发生变化。问题是，在我的浏览器历史记录中，它将新标题保存为最后一页的标题。所以，例如，如果我在一个标题为＆＃34; Home＆＃34;并导航到标题为“＃34;关于＆＃34;”的页面，我的历史记录将显示＆＃34;关于＆＃34;作为最后一项，但正确导航到＆＃34; Home＆＃34;当我点击它。我担心这会让人很困惑。

所以我想出了一个＆＃34; hack＆＃34;，这似乎解决了这个问题：

.controller( 'AppCtrl', function AppCtrl ( $scope, $location ) {
  var nextTitle = "";

  $scope.$on('$locationChangeSuccess', function (event, newUrl, oldUrl) {
    $scope.pageTitle = nextTitle;
  });

  $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    if ( angular.isDefined( toState.data.pageTitle ) ) {
      nextTitle = toState.data.pageTitle + ' | ngBoilerplate' ;
    }
  });
})

现在，标题将首先保存在变量中，并且仅在$locationChangeSuccess上分配给范围。这似乎有效，但我不知道这有多可靠。

所以我的问题是，我猜，如何正确地做到这一点。如何获得可靠的更改页面标题，从当前状态获取数据？

此外还有兴趣：为什么它不能与$stateChangeSuccess一起使用？这个事件为什么这么早发生了？

Answer 1

有关在UI路由器中设置页面标题的更一般性问题，请参阅this answer。解决方法是使用$timeout服务异步运行标题更新。该函数将在当前脚本完成后运行。

$rootScope.$on("$stateChangeSuccess", function (event, toState) {
  $timeout(function () {
    // Needed to ensure the title is changed *after* the url change
    // Ensures history entries are correct.
    $window.document.title = toState.name; 
  });

}）;

Answer 2

Mean.js为此提供了一个很棒的page-title指令。

Answer 3

看看它是如何完成的：UI Router Sample - index.html

<!-- could easily use a custom property of the state here instead of 'name' -->
<title ng-bind="$state.current.name + ' - ui-router'">ui-router</title>

Angular + UI路由器，更改$ stateChangeSuccess上的标题（事件过早发生？）

3 个答案: