angulaire.js - Comment AngularJS lie-t-il les événements aux éléments DOM ajoutés dans JS

Question

  var tpl = '<button ng-click="submitForm()" submit-form>' +
              'Submit'+
            '</button>'

  // 这两个方法都不work
  $scope.submitForm = function () {}
  angular.module('xxx', []).directive('submitForm')

Merci pour la réponse !

Answer 1

Je n’ai pas le temps d’écrire des exemples pour l’étayer, je vais donc expliquer brièvement ma compréhension, j’espère que cela vous sera utile.

Dans des circonstances normales (c'est-à-dire sans insertion dynamique d'objets DOM), la raison pour laquelle des instructions comme ng-click sont efficaces (c'est-à-dire que les méthodes enregistrées dans la portée visible peuvent être appelées après avoir cliqué) est parce qu'angular est dans la compilation phase. L'objet DOM hôte (c'est-à-dire l'objet DOM ajouté avec la directive ng-click) est lié à la portée actuelle.

En d'autres termes, la portée actuelle sait qu'il existe un objet DOM lié à ng-click, donc ng-click fonctionnera.

Dans votre exemple, le fragment HTML est inséré dynamiquement dans l'arborescence DOM après la phase de compilation. Même si vous écrivez ng-click, la portée actuelle ne connaît pas l'existence de cette directive, elle sera donc invalide.

Par conséquent, lorsque vous insérez dynamiquement un fragment HTML, vous devez appeler manuellement le service $compile et lier cet objet DOM à la portée actuelle (ou à d'autres portées visibles, selon la logique de votre application). suit :

// 在某一个 controller 中，假设用 jQuery 动态插入一个 HTML 片段……
$('selector').html(
  $compile(
    '<button ng-click="submitForm()">' + 'Submit' + '</button>'
  )(scope)
);

Notez que le service $compile doit être injecté en premier.

De plus, cette méthode est évidemment trop "dégoûtante". Il existe un meilleur moyen (mais un grand nombre d'insertions dynamiques entraîneront des pertes de performances) est d'utiliser la directive ng-repeat, par exemple :

<!-- 在要动态插入的地方…… -->
<p class="form-control" ng-repeat="fragment in fragments">
  <button ng-click="submitForm()">{{fragment.text}}</button>
</p>

Le fragments ici est un tableau vide (état initial), donc ng-repeat ici n'aura aucun effet au début. Ensuite, vous écrivez une méthode pour déclencher l'action d'insertion dynamique, et mettez une méthode similaire à { text: 'Submit' }. comme cet objet push dans ce tableau vide, ng-repeat vous "aidera" à insérer l'objet DOM, et ng-repeat lui-même recompilera l'objet DOM sous-jacent, donc ng-click prendra effet comme vous le souhaitez.

J'ai supprimé votre directive submit-form dans les deux exemples ci-dessus car elle n'est pas nécessaire. Si vous souhaitez l'écrire sous forme d'instruction, vous devez alors apprendre la méthode ng-repeat, qui signifie simplement surveiller une expression (telle que item in items), et lorsque items change, recompiler le modèle HTML sous-jacent. Vous pouvez trouver le code spécifique, angulaire est open source.