0

This is a follow-up question to which ng-click takes precedence in a table?

Basically, I'd like to ensure, that whenever the cell is clicked, action1 will be executed first, completed, followed by action2. Is there a way to enforce that?

<table>
 <tbody>
  <tr ng-repeat="..."  ng-click="ctrl.action1()" >
    <td>
      <a class="..." ng-click="ctrl.action2()"><i class="..."></i></a>
    </td>
  </tr>
 </tbody>
</table>
Community
  • 1
  • 1
Ya.
  • 1,671
  • 4
  • 27
  • 53

1 Answers1

0

This is the best I can think of, don't let the event bubble and call action1 from inside action2

<a class="..." ng-click="ctrl.action2($event)"><i class="..."></i></a>

Controller

$scope.action2 = function(evt){
     evt.stopPropagation();
     $scope.action1();
     // other action2 code
}

Assumes no asynchronous operations in action1() and you probably need to pass in other arguments for data item on that row

There is an alternative also to get rid of action2 in html, pass the event into action one and check the target of event

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • There are potentially asynchronous operations in action1. – Ya. Oct 08 '15 at 23:27
  • then you would need to wrap the remainder of action1 code in callback from the async operation. Or switch the name of existing `action2` and use this as a new one and call the old one in the callback – charlietfl Oct 08 '15 at 23:30