Bagaimana mendeteksi keadaan saat ini dalam direktif

86

Saya menggunakan perutean AngularUI dan saya ingin melakukan ng-class="{active: current.state}"tetapi saya tidak yakin bagaimana cara mendeteksi keadaan saat ini dalam arahan seperti ini.

Webnet
sumber

Jawaban:

115

Anda juga dapat menggunakan direktif ui-sref-active :

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>

Atau filter: "stateName" | isState&"stateName" | includedByState

darthwade
sumber
146

Memperbarui:

Jawaban ini untuk rilis Ui-Router yang jauh lebih tua. Untuk rilis yang lebih baru (0.2.5+), silakan gunakan direktif helper ui-sref-active. Detailnya di sini .


Jawaban Asli:

Sertakan layanan $ state di pengontrol Anda. Anda dapat menetapkan layanan ini ke properti di lingkup Anda.

Sebuah contoh:

$scope.$state = $state;

Kemudian untuk mendapatkan status saat ini di template Anda:

$state.current.name

Untuk memeriksa apakah suatu keadaan saat ini aktif:

$state.includes('stateName'); 

Metode ini mengembalikan nilai true jika status disertakan, meskipun itu bagian dari status bertingkat. Jika Anda berada di status bersarang user.details, dan Anda memeriksanya $state.includes('user'), itu akan mengembalikan nilai true.

Dalam contoh kelas Anda, Anda akan melakukan sesuatu seperti ini:

ng-class="{active: $state.includes('stateName')}"
Cuong Vo
sumber
3
Bagaimana dengan negara bagian yang memiliki parameter?
Bradley Trager
25

Jika Anda menggunakan ui-router, coba $ state.is ();

Anda dapat menggunakannya seperti ini:

$state.is('stateName');

Sesuai dokumentasi:

$ state.is ... mirip dengan $ state.includes, tetapi hanya memeriksa nama lengkap negara bagian.

Clement Hoang
sumber
1

Penggunaan arahan ui-sref-active yang berhasil untuk saya adalah:

<li ui-sref-active="{'active': 'admin'}">
    <a ui-sref="admin.users">Administration Panel</a>
</li>

seperti yang ditemukan di sini di bawah komentar berlabel "tgrant59 berkomentar pada 31 Mei 2016".

Saya menggunakan angular-ui-router v0.3.1.

jaycer
sumber