Bootstrap-highlight Active and Angular директива

Question

Я пытаюсь выделить выделенный элемент на панели навигации Bootstrap. Вот мой код:

<ul class="nav navbar-nav navbar-left" top-bar> 

и директива:

a.directive('topBar', function() { 
return { 
    restrict: 'AE', 
    link: function (scope, elem, attrs) { 
     $(elem).on("click", function() { 
      $(elem).find(".active").removeClass("active"); 
      $(this).parent().addClass("active"); 
     }); 
    } 
} 

});

Это работает, только если я удалю class = "nav navbar-nav navbar-left". В противном случае это не входит в директиву. Какие-либо предложения?

Thanks

Answer 1

Я предполагаю, что вы хотите слушать щелчки по элементам списка (тег li) в компоненте и обновлять свои классы. Попробуйте использовать event delegation - если вы используете JQuery, просто добавьте дополнительный селектор в on вызова:

a.directive('topBar', function() { 
    return { 
     restrict: 'AE', 
     link: function (scope, elem, attrs) { 
      elem.on("click", "li", function (e) { 
       elem.find(".active").removeClass("active"); 
       $(this).addClass("active"); 
      }); 
     } 
    }; 
}); 

Answer 2

используйте этот код. может быть, это поможет вам ...

app.directive('topBar', function() { 
    return { 
     restrict: 'AE', 
     link: function (scope, elem, attrs) { 
      $(elem).on("click", function() { 
      $(".active").removeClass("active"); 
      $(elem).addClass("active"); 

      }); 
     } 
    } 
}); 

see this link