I use $ stateProvider here's the code:

.state('books', { url: '/main', controller: 'MainCtrl'}) .state('books.home', { url: '/home', controller: 'HomeCtrl'}) .state('books.about', { url: '/about', controller: 'AboutCtrl'})

I wrote a directive in which the following code:

 <li ui-sref-active="active"><a ui-sref="books">main</a></li> <li ui-sref-active="active"><a ui-sref="books.home">home</a></li> <li ui-sref-active="active"><a ui-sref="books.about">about</a></li>

The problem is that ui-sref = "books" always has the class active, even if I switch to home or about. How to make it so that this class is not assigned to the parent state?

    1 answer 1

    The description for the ui-sref-active directive states

    Will activate when it is active. If you want to use it, then you’ll use ui-sref-active-eq

    That is, a class will be assigned if the current state matches the one specified in ui-sref, or if any child state is selected. If you need an exact match, then you need to use the directive ui-sref-active-eq

    Example:

     angular.module('app', ['ui.router']) .config(function($stateProvider) { $stateProvider .state('books', { url: '/main', controller: function() {} }) .state('books.home', { url: '/home', controller: function() {} }) .state('books.about', { url: '/about', controller: function() {} }) }) 
     .active { border: 1px solid green; } 
     <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script data-require="ui-router@0.2.13" data-semver="0.2.13" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script> <div ng-app='app'> <ul> <li ui-sref-active-eq="active"><a ui-sref="books">main</a> </li> <li ui-sref-active-eq="active"><a ui-sref="books.home">home</a> </li> <li ui-sref-active-eq="active"><a ui-sref="books.about">about</a> </li> </ul> <ui-view></ui-view> </div>