My code works fine, but there's a problem: if someone clicks outside the target area (the text label), the directive doesn't fire.
Here's my directive:
//directive to change active menu class in bootstrap
app.directive('activeClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).on('click', function() {
$(".nav div").removeClass("activeTab");
element.addClass("activeTab");
});
}
};
});
This is how I'm using the directive with Bootstrap nav bar:
<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>
I need the directive to only affect the div but still trigger when the a tag is clicked. Any advice on how to achieve this would be appreciated. Thanks.