AngularJS: применение прослушивателя событий к нескольким элементам

Question

Мне нужно добавить/удалить определенные классы на основе щелчка по любому из нескольких элементов (дочерних элементов элемента). Эти элементы могут быть построены динамически при загрузке страницы, поэтому я не могу поместить ng-click на каждый.

Как я могу выполнить это правильно и легко в AngularJS?

$(".btn-group > .btn").click(function(){ 
    $(this).addClass("active").siblings().removeClass("active"); 
}); 

addClass(), братья и сестры() и removeClass() должен работать без JQuery включены, насколько я знаю, так как Угловое имеет свой jqLite право?

Уверен, что мне не хватает чего-то очевидного ... Спасибо за любую помощь.

Answer 1

Вы можете использовать делегирование событий.

В основном вам нужно будет добавить у слушателя событий для родительского элемента динамически создаваемых элементов и проверить источник пузыря событий до

document.querySelector('input[type="button"]').addEventListener('click', function() { 
    var el = document.createElement('li'); 
    var id = new Date().getTime().toString(); 
    el.id = id; 
    el.innerHTML = id; 
    document.querySelector('.ct').appendChild(el); 
}); 

document.querySelector('body').addEventListener('click', function(event) { 
    if (event.target.tagName.toLowerCase() === 'li') { 
    alert(event.target.id); 
    } 
}); 

пожалуйста, обратитесь к этому jsfiddle

Answer 2

Более элегантно вас может расширить класс .btn так:

.directive('btn', function(){ 
    return { 
     restrict: 'C' // call the directive on DOM elements with the class 'btn' 
     link: function(scope, elem, attr){ 
     if(elem.parent().hasClass('btn-group'){ 
      elem.bind('click', function(){ 
      elem.parent().children().removeClass('active'); 
      elem.addClass('active'); 
      }); 
     } 
     } 
    } 
} 

Любой .btn на ваши йотах тогда будет иметь пользовательское поведение, если он час как правильно составлено.