Direktifte mevcut durum nasıl tespit edilir


86

AngularUI'nin yönlendirmesini kullanıyorum ve bir yapmak istiyorum, ng-class="{active: current.state}"ancak böyle bir yönergede mevcut durumu tam olarak nasıl algılayacağımdan emin değilim.

Yanıtlar:


115

Ayrıca ui-sref-active direktifini kullanabilirsiniz:

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

Veya filtreler: "stateName" | isState&"stateName" | includedByState


146

Güncelleme:

Bu cevap, Ui-Router'ın çok daha eski bir sürümü içindi. Daha yeni sürümler için (0.2.5+), lütfen yardımcı yönergeyi kullanın ui-sref-active. Detaylar burada .


Orijinal Cevap:

$ State hizmetini denetleyicinize ekleyin. Bu hizmeti kapsamınızdaki bir mülke atayabilirsiniz.

Bir örnek:

$scope.$state = $state;

Ardından mevcut durumu şablonlarınızda almak için:

$state.current.name

Bir durumun mevcut aktif olup olmadığını kontrol etmek için:

$state.includes('stateName'); 

Bu yöntem, durum dahil edilmişse, iç içe bir durumun parçası olsa bile doğru döndürür. İç içe geçmiş bir durumda user.detailsolsaydınız ve kontrol ettiyseniz $state.includes('user'), doğru geri döner.

Sınıf örneğinizde şöyle bir şey yaparsınız:

ng-class="{active: $state.includes('stateName')}"

3
Parametreleri olan eyaletler için ne olacak?
Bradley Trager


25

Ui-yönlendirici kullanıyorsanız, $ state.is ();

Bunu şu şekilde kullanabilirsiniz:

$state.is('stateName');

Başına belgeler:

$ state.is ... $ state.includes'e benzer, ancak yalnızca tam durum adını denetler.


1

Benim için çalışan ui-sref-active yönergesinin kullanımı şuydu:

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

"tgrant59 31 Mayıs 2016 tarihinde yorum yaptı" etiketli yorumun altında burada bulunan gibi .

Açısal-ui-yönlendirici v0.3.1 kullanıyorum.


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.