将单击事件绑定到角度链接器中的元素和子元素

Question

I have a directive which is basically a big table. In some of the cells in the table, I have divs with some content. Whenever a div is clicked I would like to do something (exemplified by the console.log("clicked") in my code below).

The thing is that the div contains other html-elements as well, and if one of the descendant html-elements are clicked nothing happens. So I would like to do something both when the parent div is clicked and when any descendant elements are clicked.

The following does something when the div is clicked but not when any descendant is clicked:

link: function(scope, element) {
  element.on("click", function(e) {
    if (e.target.className.match('myclass')) 
       {
         console.log("Clicked!");
       }
    });
   }

How do I make sure the above happens when clicking the div AND any element inside the element with "myclass"?

Answer 1

What you need in your event is

if (e.target.className.match('myclass') || $(e.target).closest('.myclass')) {
      alert("Clicked!");
    }

the function closest() allows you to search in the parents.

(I assume you have jQuery in your project because is part of the tags)

Having said that, I strongly discourage you to mix jQuery and AngularJs unless is necessary. You could achieve similar functionality without using jQuery at all in your project in most cases.

I believe you could get the same functionality if in your template for each div you just use ng-click="someFunction()" - it will fire when clicked from children elements