Angular Bootstrap活动菜单项

Question

I have on my main page :

  <li ng-class="{ active: hello.isActive('/page1')}"><a ui-sref="root.content({store:hello.store_selected,product:hello.product_selected})" >page1</a></li>
  <li ng-class="{ active: hello.isActive('/page2')}"><a ui-sref="root.turnover({store:hello.store_selected,product:hello.product_selected})">page2</a></li>

I have two controller for each route: Page1Controller and Page2Controller. The main page where I pick this code from has also a controller: HelloController. I have in my helloController

  vm.isActive= function(viewLocation){
     return viewLocation ===$location.path();
   };

When I click on an item i get the current item highlighted. But I have two problems : when i click anywhere else on the page the current item is not highlighted anymore. And also at the start of the page or when I refresh a page, i don't have highlighted item . Could you help please ? Thank you

Answer 1

ui-router already has this functionality built in using ui-sref-active

<li ui-sfref-active="active"><a ui-sref="root.content({store:hello.store_selected,product:hello.product_selected})" >page1</a></li>

Your problem probably is that path isn't an absolute match and you should probably have been using indexOf() instead of checking for equality