是否可以在没有 ui-sref 的情况下使用 ui-sref-active？答案

【问题标题】：Is it possible to use ui-sref-active without having a ui-sref?是否可以在没有 ui-sref 的情况下使用 ui-sref-active？
【发布时间】：2019-03-03 21:36:47
【问题描述】：

我有这个模板

<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>

我有一个要求，用户不应该能够通过点击 url 在这些状态之间导航，他应该使用特定模板中的按钮在状态之间导航。

我想知道如何在没有ui-sref 指令的情况下使用ui-sref-active？

【问题讨论】：

把#放在那里
@RameshRajendran ui-sref="#" 和 href="#" 均无效。

标签： angularjs angular-ui-router ui-sref

【解决方案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;
    }
};

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

我想出了这个功能：

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

并像这样使用它：

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

【讨论】：