返回$ stateParams動態標題

Question

我能夠通過點擊一個鏈接到我們的「計數」頁面

$state.go('count', {targetName: object.name}) 

因爲什麼是建立在路由器時，路由器的參數，如下圖所示：

url: '/count/:targetName', 

我們正在使用的用戶界面 - 路由器中的data:選項搭配$state動態設置我們的頁面標題

<title ng-bind="'Application Name : ' + $state.current.data.pageTitle"></title> 

我想pageTitle包括:targetName。所以爲了做到這一點，我相信我需要在路由器的data:屬性中設置一個功能。我試過這樣的：

data: { 
    pageTitle: function() { 
     getTargetName.$inject('$stateParams'); 
     function getTargetName ($stateParams) { 
      return $stateParams.targetName; 
     } 
    } 
} 

這不允許頁面解決。

任何提示？

Answer 1

有a working plunker

讓我們這些種狀態

// this is just a state, with its own pageTitle STRING 
.state('home', { 
    ... 
    data: { 
     pageTitle: "Just a home page" 
    }, 
}) 
// this is a parent state, with URL parameter 'someParam' 
// nad pageTitle as a function 
.state('parent', { 
    ... 
    url: "/parent?someParam", 
    data: { 
     pageTitle: function ($stateParams) { 
      return `title with a param ${$stateParams.someParam}`; 
     } 
    } 
}) 
// and to show that child can change it 
.state('parent.child', { 
    ... 
    data: { 
     pageTitle: "just a child title", 
    } 
}) 

，使這行代碼工作的：

<title>The tile is: {{ getTitle() }} </title> 

，我們可以只添加少量評價爲$rootScope，但當然，應該是一些服務... 把它當做簡化如何：

.run(['$rootScope', '$state', '$stateParams', 
    function ($rootScope, $state, $stateParams) { 

    $rootScope.getTitle = function(){ 
     var state = $state.current; 
     var params = $stateParams; 

     if (state.data 
     && state.data.pageTitle) { 

     if(typeof (state.data.pageTitle) === "function"){ 
      return state.data.pageTitle(params); 
     } 
     return state.data.pageTitle 
     } 
     return "no title for this state" 
    } 
}]) 

，所有這些環節都會有不同的標題

<a href="#/home"> 
<a ui-sref="parent({someParam: 1})"> 
<a ui-sref="parent({someParam: 'someValue'})"> 
<a ui-sref="parent.child"> 

檢查它在行動here