Tag ‹judul› dinamis Router UI

Saya menambahkan judul ke setiap negara bagian di ui-router seperti itu:

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

Dan kemudian atribut title mengambil data itu:

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

Bagaimana cara mengambil data dari parameter status dan menambahkannya ke judul pada contoh di atas? Saya mencoba yang berikut ini tetapi tidak berhasil:

.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 sumber

Jawaban (3)


arrow_upward
2
arrow_downward

Anda harus menggunakan app.run() di file app.js dan menetapkan judul Anda di $rootScope.title . Anda dapat mengikuti kode ini

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

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

setelah ini lalu ikat variabel di html anda seperti ini

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

Saya pikir ini akan membantu

person Nahid Bin Azhar    schedule 13.05.2015
comment
Anda tidak menjelaskan bagaimana cara menyetel judul dinamis untuk toState.data.title - person Pankaj Parkar; 13.05.2015
comment
ini rutenya .state('projects', { url: '/', templateUrl: 'projects/projects.html', ncyBreadcrumb: { label: 'Projects' }, data : {title: 'Projects'} }) jadi dari rute tersebut saya hanya mendapat title dari data.title - person Nahid Bin Azhar; 13.05.2015
comment
ya, ini kode keras, bukan dinamis, dia bertanya bagaimana cara mengikat data ini ke ‹judul›. jadi saya hanya menunjukkan cara melakukannya - person Nahid Bin Azhar; 13.05.2015
comment
Saya rasa saya bingung karena {{state}} ini yang mengindikasikan dinamis bagi saya - person Pankaj Parkar; 13.05.2015
comment
Sebenarnya dia tidak menjelaskan masalahnya dengan baik :D - person Nahid Bin Azhar; 13.05.2015

arrow_upward
0
arrow_downward

Ada contoh yang berfungsi

Menurut saya, Anda hampir sampai. Judulnya bisa terlihat seperti ini:

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

Mari kita memiliki dua negara bagian ini:

  .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' },
  })
  ;

Dan panggil mereka seperti ini:

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

Dan dengan pengait ini:

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

Jadi intinya di $rootScope kita bisa mengakses keduanya, $state.current dan $stateParams

Periksa di sini (CATATAN, untuk melihat plunker di jendela terpisah, klik kanan -ikon biru pojok atas - jendela baru akan mengubah judulnya juga)

person Radim Köhler    schedule 13.05.2015

arrow_upward
0
arrow_downward

Saya menyarankan Anda untuk menggunakan opsi params daripada menggunakan opsi data, karena params dapat bersifat opsional dan Anda dapat mengaturnya secara dinamis dengan meneruskan parameter di dalam direktif $state.go atau ui-sref Anda.

Kode

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

Dari Pengontrol

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

Dari HTML

ui-sref="projects({title: 'Something Else'})"
person Pankaj Parkar    schedule 13.05.2015
comment
@byteSlayer apakah ini membantu Anda? - person Pankaj Parkar; 14.05.2015