Maison > interface Web > js tutoriel > le corps du texte

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

高洛峰
Libérer: 2017-03-25 16:11:50
original
1336 Les gens l'ont consulté

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){
    }
  }
})
Copier après la connexion

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

<p ng-click="hello()">Hi everyone</p>
Copier après la connexion

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);
Copier après la connexion

À 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(&#39;myText&#39;,function($compile){})
Copier après la connexion

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);
        })
      });
    }
  }
})
Copier après la connexion
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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal