2

私はこのテンプレートを持っています

<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-activeなしでどのように使用できるのか疑問に思っていましたか?ui-sref

4

2 に答える 2

4

次のようなことを試してください：

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

これがあなたを助けることを願っています。

于 2017-01-02T10:47:50.910 に答える
1

私はこの機能を思いつきました：

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

次のように使用します。

 <a  ng-class="{'active': isStateActive('main.step1')}">            <span>1</span>
  </a>
于 2017-01-02T11:04:48.923 に答える