AngularJS : 여러 요소에 이벤트 리스너 적용

Question

여러 요소 (요소 자식) 중 하나를 클릭하여 특정 클래스를 추가/제거해야합니다. 이 요소들은 페이지로드시 동적으로 생성 될 수 있으므로 각각을 클릭 할 수는 없습니다.

정확하게 AngularJS에서 쉽게이 작업을 수행 할 수 있습니까? 포함

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

addClass(), 형제 자매()와 removeClass()는 지금까지의 내가 각도가 jqLite 잘 가지고 있기 때문에 알고 jQuery를하지 않고 일을해야합니까?

나는 확실한 무엇인가를 놓치고 있다고 확신한다 ... 어떤 도움을 주셔서 감사합니다.

Answer 1

이벤트 위임을 사용할 수 있습니다.

기본적으로 당신은 참조하시기 바랍니다이 jsfiddle

Answer 2

당신을 더 우아하게 동적으로 생성 된 요소의 부모 요소에 이벤트 리스너를 추가하고 최대

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); 
    } 
}); 

이벤트 버블의 원인을 확인해야합니다 다음과 같이 .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'); 
      }); 
     } 
     } 
    } 
} 

dom의 모든 .btn은 h 올바르게 컴파일되었습니다.