Angular directive button click with nested html

Question

I have an custom directive

<div class="btn active"  approveme="" data-ismember="0">
  <i class="show-mobile fa fa-mail-reply" title="Aprove"></i>
  <i class="hide-mobile">Approve</i>
</div>

I am binding a click to this div on click the html inside the div changes to Deny.

Here is the sample code of my directive.

app.directive('approveme', function($modal) {   

  return function(scope, element, attrs, modal) {

    var somefunction = function(){

      if(attrs.ismember == 0){

            //do something
      }

    };


     element.bind('click', somefunction); 


  }

});

When I click the edge of the button the and console.log element I get the parent div which returns the ismember attribute.

However when I click the text inside the div, element returns the <i> tag which does not have the attribute ismember

How do get element to always return the parent div?

Can you provide an example that replicates the behaviour? I created one using JSBin and cannot replicate. Possibile it's something related to CSS inline, block, inline-block, z-index. — Ricardo Velhote
– Ricardo Velhote, Commented Dec 30, 2015 at 11:02
Actually I figured it out when you click the i or the div tag to simply use element.currentTarget to get the attributes. — Neil
– Neil, Commented Dec 31, 2015 at 3:25
Good to know! Is there a specific reason why you don't use a <button> element. It would be more semantically suited or this purpose. — Ricardo Velhote
– Ricardo Velhote, Commented Dec 31, 2015 at 21:33

Anbu · Accepted Answer · 2015-12-30 10:34:14Z

0

may try this

   $(element).on( "click", function() {
      console.log(this);
      somefunction();
   });

answered Dec 30, 2015 at 10:34

Anbu

5308 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular directive button click with nested html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related