AngularJS: Установить элемент класса активного по умолчанию

Question

Я создал пользовательский элемент вкладок, используя следующий код:

<div class="row step"> 
    <div class="col-md-4 arrow active" ui-sref-active="active"> 
     <a ui-sref="dashboard.create.key_elements" ui-sref-opts="{ reload: true }"> 
      <span class="number">1</span> 
      <span class="h5">Key Elements</span> 
     </a> 
    </div> 
    <div class="col-md-4 arrow" ui-sref-active="active"> 
     <a ui-sref="dashboard.create.questions" ui-sref-opts="{ reload: true }"> 
      <span class="number">2</span> 
      <span class="h5">Questions</span> 
     </a> 
    </div> 
    <div class="col-md-4 arrow" ui-sref-active="active"> 
     <a ui-sref="dashboard.create.publish" ui-sref-opts="{ reload: true }"> 
      <span class="number">3</span> 
      <span class="h5">Publish</span> 
     </a> 
    </div> 
</div> 

Как вы можете видеть, я использую щ-sref-активный = «активный» в добавьте класс к активному к элементу при его нажатии. Моя проблема заключается в том, чтобы первый элемент отображался с классом active, когда страница сначала загружена, как в настоящее время, когда это происходит только при нажатии элемента. Я попытался вручную добавить активный к первому элементу, но это, кажется, игнорируется.

Answer 1

Проблема в том, что первый маршрут dashboard.create.key_elements не является текущим маршрутом, поэтому ui-router отключает его как «активный».

Решение:

1. Добавить еще один класс в CSS, например, «Newclassname» иметь такое же поведение «активного» класса

2. Добавить нг-класс для первого элемента условного переменной в $ объема и нг нажмите на другие элементы так, чтобы отключить его

В JS:

$scope.firstActive = true; 
$scope.changeFirst = function() { 
     $scope.firstActive = false; 
}; 

EDIT:

еще лучше, а не баловаться с нг кнопкой мыши, вы можете просто вводить переменную при определении маршрутов. Например. из фрагмента моего собственного кода

.state('ordini', { 
      url: '/ordini/:pdv', 
      templateUrl: 'ordini/ordini.html', 
      controller: 'OrdiniController', 
      resolve : { 
       CartValue: ['$rootScope', '$stateParams', 'CartService', function($rootScope, $stateParams, CartService){ 
        return CartService.getCartValue($rootScope.user.MachCode, $stateParams.pdv); 
       }] 
      } 

См documentation