Question

我需要根据点击任意多个元素（元素子元素）添加/删除某些类。这些元素可以在页面加载时动态构建，因此我无法点击每个元素。

如何在AngularJS中正确完成此操作？

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

addClass（），siblings（）和removeClass（）应该在没有包含jQuery的情况下工作，因为Angular的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');
          });
        }
      }
    }
}

如果已正确编译，则dom上的任何.btn都将具有自定义行为。

AngularJS：将事件侦听器应用于多个元素

2 个答案: