Як виявити поточний стан в директиві


86

Я використовую маршрутизацію AngularUI, і я хотів би зробити це, ng-class="{active: current.state}"але я не впевнений, як точно визначити поточний стан у такій директиві.

Відповіді:


115

Також ви можете використовувати директиву ui-sref-active :

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

Або фільтри: "stateName" | isState&"stateName" | includedByState


146

Оновлення:

Ця відповідь стосувалася набагато старішої версії Ui-Router. Для останніх версій (0.2.5+) використовуйте допоміжну директиву ui-sref-active. Деталі тут .


Оригінальна відповідь:

Включіть службу $ state у свій контролер. Ви можете призначити цю послугу властивості за вашим обсягом.

Приклад:

$scope.$state = $state;

Потім, щоб отримати поточний стан у ваших шаблонах:

$state.current.name

Щоб перевірити, чи є стан поточно активним:

$state.includes('stateName'); 

Цей метод повертає true, якщо стан включено, навіть якщо він є частиною вкладеного стану. Якщо ви знаходитесь у вкладеному стані, user.detailsі ви перевіряли наявність $state.includes('user'), це поверне істину.

У прикладі вашого класу ви зробите щось подібне:

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

3
А як щодо станів, які мають параметри?
Bradley Trager


25

Якщо ви використовуєте ui-маршрутизатор, спробуйте $ state.is ();

Ви можете використовувати його так:

$state.is('stateName');

Відповідно до документації:

$ state.is ... подібний до $ state.includes, але перевіряє лише повне ім'я штату.


1

Використання директиви ui-sref-active, яке працювало для мене, було:

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

як зазначено тут під коментарем із написом "tgrant59 прокоментував 31 травня 2016 року".

Я використовую angular-ui-router v0.3.1.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.