Динамический тег ‹title› UI Router

Я добавляю заголовок к каждому состоянию в ui-router следующим образом:

.state('projects', {
    url: '/',
    templateUrl: 'projects/projects.html',
    ncyBreadcrumb: {
        label: 'Projects'
    },
    data : {title: 'Projects'}
})

И затем атрибут title принимает эти данные:

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

Как я могу взять данные из параметров состояния и добавить их в заголовок в приведенном выше примере? Я пробовал следующее без везения:

.state('project', {
    abstract: true,
    url: '/projects/:projId',
    resolve:{
        projId: ['$stateParams', function($stateParams){
            return $stateParams.projId;
        }]
    },
    controller: 'projectCtrl',
    templateUrl: 'project/project.html',
    ncyBreadcrumb: {
        label: 'Project',
        parent: 'projects'
    },
    data : {title: '{{state}}'}
})

angularjs angular-ui-router title
person byteSlayer    schedule 13.05.2015    source источник

Ответы (3)


arrow_upward
2
arrow_downward

вы должны использовать app.run() в вашем файле app.js и назначить свой заголовок в $rootScope.title . вы можете следовать этому коду

app.run(function($rootScope){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState){

        $rootScope.title=toState.data.title;
    });
});

после этого привяжите переменную в своем html, как это

<title ng-bind="title"></title>

я думаю будет полезно

person Nahid Bin Azhar    schedule 13.05.2015
comment
вы не объяснили, как вы можете установить динамический заголовок для toState.data.title - person Pankaj Parkar; 13.05.2015
comment
вот маршрут .state('projects', { url: '/', templateUrl: 'projects/projects.html', ncyBreadcrumb: { label: 'Projects' }, data : {title: 'Projects'} }), так что из маршрута я просто получаю название от data.title - person Nahid Bin Azhar; 13.05.2015
comment
да, это жестко закодировано, а не динамично, он спросил, как связать эти данные с ‹названием›. поэтому я просто показываю, как это сделать - person Nahid Bin Azhar; 13.05.2015
comment
Я думаю, что я запутался из-за этого {{state}}, который указал мне динамику - person Pankaj Parkar; 13.05.2015
comment
На самом деле он не объяснил проблему должным образом :D - person Nahid Bin Azhar; 13.05.2015

arrow_upward
0
arrow_downward

Существует рабочий пример

Я бы сказал, вы почти у цели. Заголовок может выглядеть так:

<title>{{$state.current.data.title}} {{$stateParams.ID}}</title>

Пусть эти два состояния:

  .state('parent', {
      url: "/parent",
      templateUrl: 'tpl.html',
      data : { title: 'Title for PARENT' },
  })
  .state('parent.child', { 
      url: "/child/:ID",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      data : { title: 'Title for CHILD' },
  })
  ;

И называть их так:

<a ui-sref="parent">
<a ui-sref="parent.child({ID:1})">
<a ui-sref="parent.child({ID:2})">

И с этим крючком:

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

Итак, дело в том, что в $rootScope мы можем получить доступ как к $state.current, так и к $stateParams

Проверьте это здесь (ПРИМЕЧАНИЕ, чтобы увидеть плункер в отдельном окне, нажмите правую -синяя иконка в верхнем углу - новое окно также изменит заголовок)

person Radim Köhler    schedule 13.05.2015

arrow_upward
0
arrow_downward

Я бы посоветовал вам использовать параметр params вместо параметра data, потому что параметры могут быть необязательными, и вы можете установить их динамически, передав параметр внутри вашей директивы $state.go или ui-sref.

Код

.state('projects', {
    url: '/',
    templateUrl: 'projects/projects.html',
    ncyBreadcrumb: {
        label: 'Projects'
    },
    params: {
        title: { value: null }
    }
});

От контроллера

$state.go('projects', {title: 'Page1'}); //you can change title while calling state

Из HTML

ui-sref="projects({title: 'Something Else'})"
person Pankaj Parkar    schedule 13.05.2015
comment
@byteSlayer тебе помогло? - person Pankaj Parkar; 14.05.2015