Директива изменяет CSS, когда элемент активен

Question

Я очень новый для Angular, поэтому я уверен, что это неверно, но у меня есть набор из <li> элементов, которые содержат также ссылки (в отдельности они просто кнопки навигации для моей страницы). Я хотел бы сохранить конкретную кнопку, например, «Главная» выделила определенный цвет, пока пользователь находится на этой странице. Так что мой HTML примерно выглядит так ...

<li class="active menuBar"> 
     <a ui-sref="aap.configure.views" change-css="aap.isActive()"> 
     <div class="row text-center"> 
      <span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true" style="font-size: 2.5em;"></span> 
     </div> 
     <div class="row"> 
      <span class="glyphicon-class">Home</span> 
     </div> 
     </a> 
    </li> 

Я буквально только вчера написал свою первую пользовательскую Директиву так вот моя вторая попытка в одном ...

app.directive('changeCss', [ '$location', 
    function () { 
     return { 
      restrict: 'A', 
      scope: { 
       active: '&' 
      }, 
      link: function($scope, element, attrs){ 
       if($scope.active){ 
        element.addClass('actives'); 
       } 
       else { 
        element.addClass('inActives'); 
       } 
      } 

     }; 
    } 
]); 

И моя isActive() функция выглядит. ..

var active = false; 
    $scope.aap.isActive = function(){ 
     if (active){ 
      active = false; 
      return true; 
     } else { 
      active = true; 
      return false; 
     }; 
    }; 

Теперь, когда я загрузить страницу все навигационные кнопки (Home, Сохранить и т.д.) цвет, который я хотел бы, чтобы они были. Нажав на кнопку, скажем, «Домой» выделяется эта кнопка в цвете, который я бы хотел. Но, когда я вообще взаимодействую с этой домашней страницей, нажмите элемент аккордеона, например, цвет возвращается к «неактивному» цвету. Что я делаю не так?

Answer 1

Я не уверен на 100%. но я надеюсь, что это может вам помочь. Если вы хотите установить активную/неактивную базу своей панели навигации на своей странице.

Я использую ng-класс для настройки активной панели навигации (см. Здесь https://docs.angularjs.org/api/ng/directive/ngClass), передавая uri функции getClass().

<div class="col-sm-3 col-md-2 sidebar" ng-controller="mainCtrl"> 
    <ul class="nav nav-sidebar"> 
     <li ng-class="{'active': getClass('/dashboard')}" > 
      <a href="/"> 
       Dashboard 
      </a> 
     </li> 
     <li ng-class="{'active': getClass('/session')}"> 
      <a ng-href="/session"> 
       Sessions 
      </a> 
     </li> 
    </ul> 
</div> 

на мой контроллер проверить путь местоположения и посылает булево для активации/деактивации нг-класс

.controller('mainCtrl', ['$location','$scope', function ($location, $scope) { 

     $scope.getClass = function(path) {    
      if ($location.path().substr(0, path.length) == path) { 
       return true; 
      } else { 
       return false; 
      } 
     }   

    }]);