2017-01-02 2 views
1

У меня есть этот шаблонМожно ли использовать ui-sref-active без использования ui-sref?

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

+0

просто положить # там –

+0

@RameshRajendran как 'щ-sref = "#"' и ' href = "#" 'не работает. – Rachmaninoff

ответ

3

попробовать что-то вроде этого:

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

Надеется, что это поможет.

1

Я пришел с этой функцией:

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

и использовать его как это:

<a ng-class="{'active': isStateActive('main.step1')}">   <span>1</span> 
    </a> 
Смежные вопросы