How to detect current state within directive

Question

I m using AngularUI s routing and I d like to do a ng-class   active  current state   but I m unsure how to exactly detect the current state in a directive like this

User · Answer

The use of ui-sref-active directive that worked for me was    lt li ui-sref-active    active    admin    gt       lt a ui-sref  admin users  gt Administration Panel lt  a gt   lt  li gt    as found here under the comment labeled  tgrant59 commented on May 31  2016    I am using angular-ui-router v0 3 1

User · Answer

Also you can use ui-sref-active directive     lt ul gt     lt li ui-sref-active  active  class  item  gt       lt a href ui-sref  app user  user   bilbobaggins     gt  bilbobaggins lt  a gt     lt  li gt     lt  --     -- gt   lt  ul gt    Or filters   stateName    isState  amp   stateName    includedByState

User · Answer

Update   This answer was for a much older release of Ui-Router  For the more recent releases  0 2 5    please use the helper directive ui-sref-active  Details here     Original Answer   Include the  state service in your controller  You can assign this service to a property on your scope    An example    scope  state    state    Then to get the current state in your templates    state current name   To check if a state is current active    state includes  stateName       This method returns true if the state is included  even if it s part of a nested state  If you were at a nested state  user details  and you checked for  state includes  user    it d return true   In your class example  you d do something like this   ng-class   active   state includes  stateName

User · Answer

If you are using ui-router  try  state is     You can use it like so    state is  stateName     Per the documentation       state is     similar to  state includes  but only checks for the full state name

User · Answer

Check out angular-ui  specifically  route checking  http   angular-ui github io ui-utils

[angular-ui] How to detect current state within directive

Examples related to angular-ui