如果我在angular js中使用面包屑，如何在导航中应用活动类

Question

I m learning to angular js and read some documents but i have face one problum .

HI im using a application with navigation as like this

<ul class="nav navbar-nav">
        <li ui-sref-active="active"><a ui-sref="dashboard.view">Dashboard</a></li>
        <li ui-sref-active="active"><a ui-sref="aboutus">About</a></li>
        <li ui-sref-active="active"><a ui-sref="contactus">Contact</a></li>
      </ul>

Now my brodcrome is

Home > About > Carrer My url is myxyz.com/#/aboutus/carrer

than active class is not apply About but if i click to About page than active class is add.

Can u please tell me what I code write.

Thanks .

Answer 1

What I did on your case was I created a function inside a controller with couple of dependencies and then use ng-class ,

storeApp.controller('MyCtrl', function($scope, $location, $http) {
$scope.isActive = function(route) {
    return route === $location.path();
}

And then used it in my navigation.

<ul class="nav navbar-nav" ng-controller="MyCtrl">
    <li class="hvr-underline-from-left">
       <a ng-class="{activeClass:isActive('/store')}" href="#/store">SHOP</a>
     </li>
     <li class="hvr-underline-from-left">
       <a ng-class="{activeClass:isActive('/category/0/0')}" href="#/category/0/0">COLLECTIONS</a>
     </li>
 </ul>

In this example, make sure you have declared activeClass or what ever class name you want in your CSS