Проблема с бутстрапом и угловой кнопкой JS

Question

У меня есть эта бутстрап и приложение Angular JS. Я использую следующую директиву, чтобы показать активные навигационные ссылки:

mainControl.directive("myDataToggle", function(){ 
    function link(scope, element, attrs) { 
     var e = angular.element(element); 
     e.on('click', function(){ 
      e.parent().parent().children().removeClass('active'); 
      e.parent().addClass("active"); 
     }) 
    } 
    return { 
     restrict: 'A', 
     link: link 
    }; 
}); 

Проблема в том, что это работает хорошо в нав, но если у меня есть ссылка кнопки, которая содержит ссылки на отдельные разделы приложения, главный СЧ на top не обновляется. Чтобы отразить, в каком представлении я нахожусь?

Любые идеи?

Answer 1

Проблема в том, что вы устанавливаете класс при нажатии ссылки, а не при навигации. Предполагаю, что вы используете ngRoute. Если это так, вы можете попробовать этот подход:

Укажите имя для маршрутов

$routeProvider. 
    when('/', { 
     templateUrl: 'views/home.html', 
     name: 'home' 
    }). 
    when('/about', { 
     templateUrl: 'views/about.html', 
     name: 'about' 
    }); 

чем добавить $ маршрута к главному контроллеру, и передать его на $ объеме

function MainCtrl($scope, $route) { 
    $scope.$route = $route; 
} 

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

<a ng-class="{active: $route.current.name == 'home'}"> Home </a> 
<a ng-class="{active: $route.current.name == 'about'}"> About </a> 

демо: https://jsfiddle.net/jkrielaars/mao8kx0L/2/