Come rilevare lo stato corrente all'interno della direttiva


86

Sto usando il routing di AngularUI e mi piacerebbe fare un ng-class="{active: current.state}"ma non sono sicuro di come rilevare esattamente lo stato corrente in una direttiva come questa.

Risposte:


115

Inoltre puoi usare la direttiva ui-sref-active :

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

Oppure filtri: "stateName" | isState&"stateName" | includedByState


146

Aggiornare:

Questa risposta era per una versione molto più vecchia di Ui-Router. Per le versioni più recenti (0.2.5+), utilizzare la direttiva helper ui-sref-active. Dettagli qui .


Risposta originale:

Includere il servizio $ state nel controller. Puoi assegnare questo servizio a una proprietà nel tuo ambito.

Un esempio:

$scope.$state = $state;

Quindi, per ottenere lo stato corrente nei tuoi modelli:

$state.current.name

Per verificare se uno stato è attualmente attivo:

$state.includes('stateName'); 

Questo metodo restituisce true se lo stato è incluso, anche se fa parte di uno stato annidato. Se tu fossi in uno stato annidato user.detailse avessi controllato $state.includes('user'), restituirebbe vero.

Nel tuo esempio di classe, faresti qualcosa del genere:

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

3
E per gli stati che hanno parametri?
Bradley Trager


25

Se stai usando ui-router, prova $ state.is ();

Puoi usarlo in questo modo:

$state.is('stateName');

Secondo la documentazione:

$ state.is ... simile a $ state.includes, ma controlla solo il nome completo dello stato.


1

L'uso della direttiva ui-sref-active che ha funzionato per me era:

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

come si trova qui sotto il commento etichettato "tgrant59 ha commentato il 31 maggio 2016".

Sto usando angular-ui-router v0.3.1.


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.