2
<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?

1
  • You might also want to look into a filter for handling the employee name. Granted I don't know what your function is doing, but getEmployeeByName(employee.name).name looks like you have an employee's name already, and you're just translating it into some other version of the name. So potentially this could change to {{ employee.name | employeeName }} where employeeName is the new filter that does whatever getEmployeeByName() was doing previously. This would allow better re-use of that function vs having to inject it into your controller scope all the time (assuming it's used elsewhere)
    – Mike Pugh
    Nov 10, 2014 at 16:08

3 Answers 3

6

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>
5
  • I did not find where to get $event. Did :<div ng-click="addTeamMember(employee); $event.stopPropagation();">{{getEmployeeByName(employee.name).name}}</div> Nov 10, 2014 at 16:16
  • One sec. Transitioned from phone to PC so I could properly build out a sample. :)
    – DivinusVox
    Nov 10, 2014 at 16:20
  • Edited the sample to show the HTML changes and provided a link to a plunker sample.
    – DivinusVox
    Nov 10, 2014 at 16:26
  • Yes - thx. I got it : I need to send $event from HTML element. And $event is a part of JQuery Nov 10, 2014 at 16:50
  • JQuery lite is bundled into Angular. You'll find a number of similarities (because it is JQuery ;) )
    – DivinusVox
    Nov 10, 2014 at 16:56
0

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>
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.