-1

When click on parent div, it is working fine(i.e only fun1() is calling). When I click on inner div(test4), both the functions fun1() and fun2() are calling, but I want to call only fun2() when I click on inner div.

<div ng-click="fun1()">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
    <div ng-click="fun2()">test4</div>
</div>
Sagar
  • 259
  • 2
  • 3
  • 14

2 Answers2

3

Working plunker:

http://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2?p=preview

First you need to explicitly pass $event and then call stopPropagation() on it

  <div ng-click="fun2($event)">test4</div>

  $scope.fun2 = function(event){
    console.log("Fun2")
    event.stopPropagation();
  }
Alex Paramonov
  • 2,630
  • 2
  • 23
  • 27
1

ngClick directive (as well as all other event directives) creates $event variable which is available on same scope. This variable is a reference to JS event object and can be used to call stopPropagation()

Try this <div ng-click="fun2(); $event.stopPropagation()">test4</div>

Heres the plunkr

nalinc
  • 7,375
  • 24
  • 33