How to disable parent ng-click?

Question

I have HTML structure with ng-click:

<div ng-click="parent()">
  <div ng-click="d"></div>
</div>

How I can disable outside ng-click="parent()" if I do ng-click="d"

Answer 1

Use the stopPropagation method on the angular $event object:

<div ng-click="parent()">
  <div ng-click="d(); $event.stopPropagation();"></div>
</div>

Or pass the $event object as an argument of the ng-click method, and call stopPropagation in the method:

<div ng-click="parent()">
  <div ng-click="d($event)"></div>
</div>

In d:

$scope.d = function (event) {
    // ...
    event.stopPropagation();
}

Answer 2

Add only event.stopPropagation(); on the child ng-click. it will prevent to from the parent ng-click Example:

<div ng-click="parent($event)">
  <div ng-click="child($event); event.stopPropagation()">
  </div>
</div>