Angulaire ng-click $ event transmet l'élément enfant comme cible

Pour chaque td élément dans une table, j'ai un joint ng-click. Voici le (simplifié) html pour chaque cellule du tableau:

<td ng-click="cellClicked($event)">
    <span ng-if="!cellEdit">{{event.eventName}}</span>
    <input type="text" ng-if="cellEdit" ng-model="event.eventName">
</td>

Et mon (simplifié) ng-cliquez sur la fonction:

scope.cellClicked = function (event) {
  rowScope.cellEdit = true
  angular.element(event.target).find('input').focus()
}

Son mon objectif:

1. Utilisateur clique sur une cellule de tableau
2. Cellule change en "edit mode"
3. Donner le focus à la entrée élément situé à l'intérieur de la td.

Droit maintenant, c'est de travailler aussi longtemps que l'utilisateur clique sur à l'intérieur de la td élément, mais pas sur l'élément span:

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

Toutefois, si l'utilisateur clique sur l'élément span sein de la td:

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

Dans ce cas d'utilisation, l'affectation focus ne fonctionne pas. J'espérais pour accéder à l'élément parent de l' span de faire quelque chose comme:

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

ou

angular.element(event.target.parentNode)

Mais il semble que lorsqu'un élément est transmis via $event et accessible il n'y a pas de contexte parent.

Comment puis-je:

• Empêcher cliquant sur le span élément de cuisson de la td'ng-cliquez sur
• Sur cliquez de span élément traverser html de parent

source d'informationauteur Cumulo Nimbus