AngularJS implementiert eine Methode zum Binden von Ereignissen an dynamisch generierte Elemente

Das Beispiel in diesem Artikel beschreibt, wie AngularJS Bindungsereignisse für dynamisch generierte Elemente implementiert. Teilen Sie es wie folgt mit allen:

1 Wir wissen, dass in jQuery ein Element dynamisch generiert wird. Wenn Sie Ereignisse dynamisch binden möchten, während Sie das Element dynamisch generieren, können Sie die Funktion „live/“ verwenden. on-Methode (Die Bind-Methode wurde in jquery3.0 abgeschafft).

2. In AngularJS erfolgt der Betrieb des DOM im Allgemeinen in Anweisungen. Der Ereignisüberwachungsmechanismus besteht darin, Ereignisse an den DOM-Knoten in der Anweisung zu binden durch JS-Ereignisse überwacht werden.

Zum Beispiel:

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

In diesem Befehl wird ein neuer DOM-Knoten generiert:

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

Aber wenn keine Verarbeitung erfolgt, wird der ng-click Hier können keine Ereignisse implementiert werden, da die Ereignisüberwachung zum Zeitpunkt der Generierung der statischen HTML-Seite abgeschlossen ist. Wie kann man also Ereignisse an dynamisch generierte Elemente binden und eine dynamische Überwachung von Ereignissen implementieren?

3. Kompilieren Sie das DOM über den $compile-Dienst, um eine dynamische Ereignisbindung zu erreichen.

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

Kompilieren Sie mithilfe dieser beiden Sätze zunächst das DOM und fügen Sie es dann mit dem kompilierten DOM hinzu vorherige Im statischen Knoten können Sie dynamische Bindungsereignisse implementieren. Beachten Sie, dass Sie den $compile-Dienst einfügen sollten.

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

Der vollständige Code lautet wie folgt: Jeder AngularJS-Programmierer hilft.

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);
        })
      });
    }
  }
})

AngularJS implementiert die Methode der dynamischen Kompilierung und des Hinzufügens zu dom

AngularJS generiert dynamisch die ID von div

AngularJs lädt Module und Abhängigkeiten dynamisch