So behandeln Sie Ereignisse in ng-Wiederholung ohne onclick

Question

Ich baue gerade eine Chrome-Erweiterung. Die Richtlinie von Chrome besagt, dass Inline-JS-Event-Handler nicht erlaubt sind. Daher suche ich nach einer Möglichkeit, Event-Listener für meine ng-repeat-Elemente zu erstellen.

Ich habe versucht, nur die Ereignishandler basierend auf der Datenmenge zu generieren, die ich an ng-Wiederholung übergeben, und da ich die Vorlage kenne ich in der Lage, die entsprechenden IDs zu generieren, aber ich kann nicht scheinen um das Timing richtig einzustellen, so dass die Event-Listener erst gesetzt werden, nachdem ng-repeat das DOM aktualisiert hat.

Meine aktuellen Code ist unten:

app.controller('commentsCtrl', function($scope) { 
    $scope.data = datalayer; 
    //console.log($scope.data); 
    document.addEventListener('DOMContentLoaded', function(){ 

      for (var i = 0; i < datalayer.comments.length; i++){ 
       var id = datalayer.comments[i].id + "_replybutton"; 
       console.log(id); 
       var div = document.getElementById(id); 
       console.log(div); 
       console.log(datalayer.sc); 
      } 

     }); 

    }); 

x_replybutton ist die ID-Format für die Schaltfläche I für Hörer erstellen möchten. Derzeit kann ich den obigen Code in der Konsole gut funktionieren, sobald der wiederholte Abschnitt geladen wird, aber es wird nicht ausgeführt, wenn ich es dem Controller hinzufüge.

Alle Gedanken oder Vorschläge würden wirklich geschätzt werden.

Answer 1

Anscheinend ist ng-click von der Chrome-Sicherheitsrichtlinie erlaubt. https://developer.chrome.com/apps/angular_framework

Answer 2

Woher kommt Ihre datalayer Variable? Sie sollten keine globalen Variablen in Controllern oder Diensten verwenden, sondern injizieren, was Sie brauchen.

Ich würde datalayer erraten keinen Wert haben, wenn Sie es eingestellt zuweisen $scope.data, sondern ein Promise , die zu einem bestimmten Zeitpunkt aufgelöst wird, wahrscheinlich von $http.get irgendwo gemacht?

Wenn das der Fall ist, (ohne Berücksichtigung für jetzt, dass Sie den Wert in einem injizierten Dienst produzieren sollen) Sie wahrscheinlich

tun können

app.controller('commentsCtrl', function($scope, $timeout) { 
    datalayer.then((datalayer) => { 
     $scope.data = datalayer; 
     $timeout(()=>{ 
      for (var i = 0; i < datalayer.comments.length; i++){ 
       var id = datalayer.comments[i].id + "_replybutton"; 
       var div = document.getElementById(id); 
       div.addEventListener('click', function() { 
        console.log('clicked'); 
       }); 
      } 
     }, 0); 
    }) 
} 

$timeout(()=>{ <code here> }, 0) werden Ihren Code wartet Ausführung machen, bis Angular Rendering abgeschlossen ist das DOM (bewirkt, dass JavaScript den Code ausführt, nachdem der Stapel gelöscht wurde).