So erkennen Sie den aktuellen Status innerhalb der Richtlinie

Ich verwende das Routing von AngularUI und würde gerne ein Routing durchführen, bin mir ng-class="{active: current.state}"aber nicht sicher, wie ich den aktuellen Status in einer solchen Direktive genau erkennen soll.

Sie können auch die Direktive ui-sref-active verwenden :

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

Oder Filter: "stateName" | isState&"stateName" | includedByState

Aktualisieren:

Diese Antwort war für eine viel ältere Version von Ui-Router. Verwenden Sie für die neueren Versionen (0.2.5+) die Hilfsanweisung ui-sref-active. Details hier .

Ursprüngliche Antwort:

Fügen Sie den $ state-Dienst in Ihren Controller ein. Sie können diesen Service einer Eigenschaft in Ihrem Bereich zuweisen.

Ein Beispiel:

$scope.$state = $state;

So erhalten Sie den aktuellen Status in Ihren Vorlagen:

$state.current.name

So überprüfen Sie, ob ein Status aktuell aktiv ist:

$state.includes('stateName'); 

Diese Methode gibt true zurück, wenn der Status enthalten ist, auch wenn er Teil eines verschachtelten Status ist. Wenn Sie sich in einem verschachtelten Zustand befinden user.detailsund nach $state.includes('user')diesem suchen, wird true zurückgegeben.

In Ihrem Klassenbeispiel würden Sie ungefähr Folgendes tun:

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

Wenn Sie einen UI-Router verwenden, versuchen Sie $ state.is ();

Sie können es so verwenden:

$state.is('stateName');

Gemäß der Dokumentation:

$ state.is ... ähnelt $ state.includes, prüft jedoch nur den vollständigen Statusnamen.

Die Verwendung der Richtlinie ui-sref-active , die für mich funktioniert hat, war:

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

wie hier unter dem Kommentar "tgrant59 kommentiert am 31. Mai 2016" zu finden.

Ich benutze Angular-UI-Router v0.3.1.

Schauen Sie sich Angular-UI an, insbesondere die Routenprüfung: http://angular-ui.github.io/ui-utils/