For each td element in a table I have an attached ng-click. Here is the (simplified) html for each table cell:

<td ng-click=cellClicked($event)>

    <span ng-if=!cellEdit>{{event.eventName}}</span>

    <input type=text ng-if=cellEdit ng-model=event.eventName>

</td>

And my (simplified) ng-click function:

scope.cellClicked = function (event) {

  rowScope.cellEdit = true

  angular.element(event.target).find('input').focus()

}

Its my goal to:

1. User clicks a table cell


2. Cell changes to edit mode


3. Give focus to the input element located inside the td.

Right now this is working as long as the user clicks inside the td element but not on the span element:

console.log(angular.element(event.target)) #--> [td...] (as desired)

However if the user clicks on the span element within the td:

console.log(angular.element(event.target)) #--> [span...]

In this use case assigning focus does not work. I was hoping to access the parent element of the span doing something like:

angular.element(event.target.closest('td'))

or

angular.element(event.target.parentNode)

But it appears when an element gets passed through via $event and accessed there is no parent context.

How can I either:

• Prevent clicking the span element firing the td's ng-click


• On click of span element pass through it's html parent