使用AngularJS和UI-Router更新標題標籤

我嘗試使用當前狀態的名稱（通過ui-router）設置頁面的標題時遇到了一個奇怪的問題。使用AngularJS和UI-Router更新標題標籤

實際上，問題不在於設置標題，問題在於標題被設置爲history.pushState之前的下一個狀態的標題。所以當我轉換到一個新的url時，歷史中的第一個項目與當前頁面具有相同的名稱。

我只是在玩樣品（http://angular-ui.github.io/ui-router/sample/），我也設法在那裏重現它。如果你點擊關於，然後回到家中，你會看到2個不同的'家'條目。他們都指出了正確的網址，但他們的名字已被破壞。奇怪的是，點擊Contact.list和contact.details可正確設置歷史記錄。

有沒有辦法解決這個問題？在管道中時，history.pushstate會被調用嗎？

來源

2013-11-25 ChrisThomas

我還沒有能夠重現這個問題的例子或我自己的實現。也許它與正在使用的瀏覽器有關？ –

我剛剛嘗試過Chrome 33和IE 10，並在兩者中進行了轉載。 – ChrisThomas

啊，我明白你的意思了。歷史標題全部移回1.只要您更改頁面，最後一頁就會獲取歷史記錄中當前頁面的標題。由於即使在例子中也存在這個bug，它可能只是一個ui-router錯誤。在gh上打開一個問題？ –

我有類似的情況，像你的，我喜歡以下。你可以把它放在你的主應用程序運行塊中，如下所示。我

angular.module('myApp').run([ 
    '$log', '$rootScope', '$window', '$state', '$location', 
    function($log, $rootScope, $window, $state, $location) { 

     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 
      if (toState.title) { 
       $rootScope.pageTitle = toState.title; 
      } 
     }); 

     $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { 
      // something else 
     }); 

     $state.go('home'); 
    } 
]);

，並在HTML頭我有

<html class="no-js" class="ng-app" ng-app="..." id="ng-app"> 
    <head> 
    .... 
     <title ng-bind="pageTitle"></title>

希望這對你的作品。

PS：詳情請諮詢https://docs.angularjs.org/guide/module。

來源

2014-07-10 03:11:41 salek

你把代碼放在哪裏？在控制器中？ –

把它放在您的主要模塊運行塊 – salek

我還沒有機會嘗試這個，但它顯示瀏覽器歷史中的正確標題？ – ChrisThomas

我有一個「類似」的情況......並回答了它here。

它基本上定義了$rootScope.$state = $state裏面的角運行方法。這使我們能夠訪問模板中的當前狀態信息。

<title ng-bind="$state.current.data.pageTitle"></title>

關鍵是將它定義在run方法的$ rootScope中。

來源

2014-09-28 15:50:02 cwbutler

我爲此編寫了angular-ui-router-title插件。您可以使用它將頁面標題更新爲基於當前狀態的靜態或動態值。它也正確地與瀏覽器歷史一起工作。

來源

2015-05-10 16:41:09

使用AngularJS和UI-Router更新標題標籤

回答

相關問題