angular.js - angular路由之後的按鈕樣式要怎麼改變？

Question

如題，我想在路由後改變按鈕的樣式，就是下面在點擊 about 連結之後 active 類別應該會從API上消失並轉移到about上。

但是我不希望透過dom的方式實現（感覺那樣還是在用jquery的方式在解決問題）。請問angular裡怎樣實現才算得上優雅呢？

<ul class="nav navbar-nav">
     <li class="active"><a href="#/">API</a></li>
     <li><a ng-href="#/about">About</a></li>
</ul>

Answer 1

$scope.$state = $state;

<ul class="nav navbar-nav">
     <li ng-class="{'active': $state.current.name = 'main'}"><a href="#/">API</a></li>
     <li ng-class="{'active': $state.current.name = 'about'}"><a ng-href="#/about">About</a></li>
</ul>

上面路由名字換成實際的

也可以ui-router的指令，參考

Answer 2

可以使用ng-class指令bool判斷，綁定點擊事件把li的$index傳過去。