AngularJS implémente la méthode de liaison des événements aux éléments générés dynamiquement

L'exemple de cet article décrit comment AngularJS implémente des événements de liaison aux éléments générés dynamiquement. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Nous savons que dans jQuery, un élément est généré dynamiquement. Si vous souhaitez lier dynamiquement des événements tout en générant dynamiquement l'élément, vous pouvez l'utiliser. la méthode live/on (la méthode bind a été supprimée dans jquery3.0).

2. Dans AngularJS, l'exploitation du DOM est généralement complétée dans les instructions. Le mécanisme d'écoute des événements consiste à lier les événements au DOM généré statiquement. Si le nœud DOM est généré dynamiquement dans l'instruction, le nœud généré dynamiquement ne le sera pas. être surveillé par les événements JS.

Par exemple :

angular.module('myapp',[])
.directive('myText',function(){
  return{
    restrict:'A',
    template:&#39;<p ng-click="hello()">Hi everyone</p>&#39;,
    link:function(scope,ele,attr){
    }
  }
})

Dans cette commande, un nouveau nœud DOM sera généré :

<p ng-click="hello()">Hi everyone</p>

Mais si aucun traitement n'est effectué, le ng-click ici, les événements ne peuvent pas être implémentés car la surveillance des événements est terminée lorsque la page HTML statique est générée. Alors, comment lier des événements à des éléments générés dynamiquement et mettre en œuvre une surveillance dynamique des événements ?

3. Compilez le DOM via le service $compile pour obtenir une liaison d'événement dynamique

var template:'<p ng-click="hello()">Hi everyone</p>',
var content = $compile(template)(scope);

À l'aide de ces deux phrases, compilez d'abord le DOM, puis utilisez le DOM compilé pour l'ajouter au précédent Dans le nœud statique, vous pouvez implémenter des événements de liaison dynamique. Notez que vous devez injecter $compile service

.directive('myText',function($compile){})

Le code complet est le suivant : Tout le monde est aidé par la programmation AngularJS.

angular.module('myapp',[])
.directive('myText',function($compile){
  var template:'<p ng-click="hello()">Hi everyone</p>',
  return{
    restrict:'A',
    link:function(scope,ele,attr){
       ele.on("click", function() {
        scope.$apply(function() {
          var content = $compile(template)(scope);
          element.append(content);
        })
      });
    }
  }
})

Pour plus d'articles sur la façon dont AngularJS implémente des événements de liaison aux éléments générés dynamiquement, veuillez prêter attention au site Web PHP chinois !

Articles associés :

AngularJS implémente la méthode de compilation dynamique et d'ajout à dom

AngularJS génère dynamiquement l'ID de div

AngularJs charge dynamiquement les modules et les dépendances