Angular + UI Router，更改$ stateChangeSuccess上的標題（事件觸發得太早了嗎？）

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事件上都會更改。 問題是，在我的瀏覽器歷史記錄中，它將新標題保存為最后一頁的標題。 因此，例如，如果我在標題為“主頁”的頁面上並導航至標題為“關於”的頁面，我的歷史記錄將顯示“關於”作為最后一項，但是當我單擊它時可以正確導航至“主頁” 。 我擔心這會讓人們感到困惑。

所以我想出了一個“ hack”，似乎可以解決這個問題：

.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路由器中設置頁面標題的更通用問題的答案 。 解決方法是使用$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為此提供了出色的頁面標題指令。

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>