Директива buggy bootstrap nav - angularjs

Question

вот мой код - он работает, однако, если кто-то нажимает за пределы целевой области (текстовая метка), директива не срабатывает.

Директива:

//bootstrap change active menu class 
app.directive('activeClass', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      $(element).on('click', function() { 
       $(".nav div").removeClass("activeTab"); 
       element.addClass("activeTab"); 
      }); 
     } 
    }; 
}); 

Bootstrap нав бар:

 <ul class="nav navbar-nav" ng-show="isMentor"> 
      <li > 
       <a href="/home" data-toggle="collapse" data-target=".navbar-collapse"><div active-class>Home</div></a> 
      </li> 
      <li> 
       <a href="/myGoals" data-toggle="collapse" data-target=".navbar-collapse"><div active-class>My goals</div></a> 
      </li> 
     </ul> 

Я хочу, чтобы эта директива только влияет на DIV, но огонь, если тег нажата. Как я могу это сделать. Благодарю.

Answer 1

Присоединить директиву ли, и чем изменения в JavaScript, как это:

app.directive('activeClass', function() { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $(element).on('click', function() { 
      $(".nav div").removeClass("activeTab"); 
      element.find('div').addClass("activeTab"); 
     }); 
    } 
}; 
});