使用ui-sref-active而不使用ui-sref是否可行？

Question

我有這個模板

<div class="row"> 
    <div> 
     <div > 
      <a ui-sref-active="active" ui-sref="main.step1"> 
       <span>1</span>    
      </a> 
      <a ui-sref-active="active" ui-sref="main.step2"> 
       <span>2</span> 
      </a> 
      <a ui-sref-active="active" ui-sref="main.step3"> 
       <span>3</span>     
      </a> 
     </div> 
    </div> 
</div> 

<div id="form-views" ui-view> 

</div> 

我有用戶不應該能夠論文之間進行導航的要求規定通過點擊網址，他應國家之間的按鈕這是在其特定的模板導航。

我想知道如何不用ui-sref指令使用ui-sref-active？

Answer 1

嘗試這樣：

<ul class="nav navbar-nav"> 
    <li class="icon-border"> 
     <a ng-class="{ active: isActiveMainBar('main.step1')}" ui-sref="main.step1">A 
      </a> 
    </li> 
    <li class="icon-border"> 
     <a ng-class="{ active: isActiveMainBar('main.step2')}" ui-sref="main.step2">B 
      </a> 
    </li> 
    <li class="icon-border"> 
     <a ng-class="{ active: isActiveMainBar('main.step3')}" ui-sref="main.step3">C 
      </a> 
    </li> 
</ul> 

而且在controller：

$scope.isActiveMainBar = function(tab) { 
    var path = $location.path(); 
    if (path.indexOf(tab) !== -1) { 
     return true; 
    } else { 
     return false; 
    } 
}; 

希望這會幫助你。

Answer 2

我想出了這個功能：

function isStateActive(stateName) { 
      return $state.current.name === stateName; 
} 

，並使用它像這樣：

<a ng-class="{'active': isStateActive('main.step1')}">   <span>1</span> 
    </a>