Возвращение $ stateParams для динамического заголовка

Question

Я могу передать параметр маршрутизатора при нажатии на ссылку на наш «счета» страницы

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

Из-за того, что устанавливается в маршрутизаторе, как показано ниже:

url: '/count/:targetName', 

Мы используем data: опцию в пределах UI-маршрутизатор в сочетании с $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