CODEWITHSUNDEEP
javascriptangularjs
Lagoda Denis
Lagoda Denis

Reputation: 235

Nested ng-click

<div ng-repeat='employee in filteredStaff ' ng-click="describeEmployee(employee)" >
    <div class="gridNameTd">
        <div ng-click="addTeamMember(employee)">{{getEmployeeByName(employee.name).name}} </div>
    </div>
 </div>

That is part of my code. Both of 'ng-click' are called. I need only internal ng-click="addTeamMember(employee). How to handle it?

Upvotes: 2

Views: 1753

Answers (3)

Ennedigi
Ennedigi

Reputation: 21

Try to stop the propagation of the inner events using $event.stopPropagation() as follows:

<div ng-repeat='employee in filteredStaff ' ng-click="describeEmployee(employee)" >
    <div class="gridNameTd">
        <div ng-click="addTeamMember(employee); $event.stopPropagation()">{{getEmployeeByName(employee.name).name}} </div>
    </div>
 </div>

Upvotes: 0

DivinusVox
DivinusVox

Reputation: 1191

You need to have the event not bubble up through the DOM tree. On your click even you can pass in the event and tell it to not pass it up the chain with $event.stopPropagation

Here's a working plunker: http://plnkr.co/edit/OjiFIjCEQ7jDG2owm33D?p=preview

Example:

In your controller:

$scope.addTeamMember = function($event, employee) {
  $event.stopPropagation();
  // do stuff....
}

In your HTML:

<div ng-repeat='employee in filteredStaff ' ng-click="describeEmployee(employee)" >
  <div class="gridNameTd">
    <div ng-click="addTeamMember($event, employee)">{{getEmployeeByName(employee.name).name}} </div>
  </div>
</div>

Upvotes: 6

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

umm if i understand your question you need this? 

<div ng-repeat='employee in filteredStaff'>
    <div class="gridNameTd">
        <div ng-click="addTeamMember(employee)">{{getEmployeeByName(employee.name).name}} </div>
    </div>
 </div>

Upvotes: 0

Related Questions