ng-click of child element div (Stop Propagation)

Question

I have following html markup

<div class="myDiv docTypeDesc">
     <div data-ng-click="setDocumentType(type)"> {{type.name}}
          <i data-ng-click="$event.stopPropagation()" data-ng-show ="type.description && type.description != ''"  class="icon-info-sign icon-large hand hintModal bottomRight" style="float: right;padding: 2px 7px 0 0;">
               <div class="hintModal_container animated fadeInBottom"> 
                     {{ type.description }}
               </div>
           </i>
      </div>

I dont want the click of 'i' to propagate to parent data-ng-click. I tried the above thing and also tried returning false from a scope function but no good, as this scope function of i's click is not getting called and the call goes to parent's ng-click

Create a directive as seen in http://stackoverflow.com/questions/14544741/how-can-i-make-an-angularjs-directive-to-stoppropagation — GillesC, Apr 12 '16 at 14:06
can you try with both event.preventDefault() and event. stopPropagation() — sreeramu, Apr 12 '16 at 14:08
Look http://stackoverflow.com/questions/36400229/angularjs-href-ng-click-event-bubbling/36403882#36403882. Only **$event.preventDefault();** will work. — Arun Shinde, Apr 12 '16 at 14:13
maybe your `i` element is too small or has transparency, so you're actually clicking on the element below/behind. — Lulylulu, Apr 12 '16 at 14:20
The scope function of i's click is not even getting called... Apologies I missed to tell you this. — Roshan Birwatkar, Apr 12 '16 at 14:27
Don't wrap a div inside an `i` tag.. Might be the cause of it since it won't have a decent clickarea. — Chrillewoodz, Apr 12 '16 at 14:54
@Chrillewoodz that is required for the plugin which i am using to show the tooltip. — Roshan Birwatkar, Apr 13 '16 at 05:55

score 0 · Answer 1 · answered Apr 12 '16 at 14:11

0

Sounds like you want the i's click to eventually do something. Set that up. What if you put an actual method call on the i like handleEvent($event);

scope.handleEvent = function(e){
e.stopPropagation();
}

Seems the same, I'm just curious.

answered Apr 12 '16 at 14:11

Jason

309
2
14

handleEvent is not getting called @Jason – Roshan Birwatkar Apr 13 '16 at 05:55

ng-click of child element div (Stop Propagation)

1 Answers1