ng-click funktioniert nicht von dynamisch generiertem HTML

Lesezeit: 7 Minuten

HTML

<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" >
    <tr id="newTransaction">
    </tr>
    <tr data-ng-repeat="host in hosts|filter:search:strict" >
       <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>
       <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>
    </tr>
</table>

Jquery

$('#newTransaction').append(
 '<td contenteditable><input type="text" class="editBox" value=""/></td>'+ 
 '<td contenteditable><input type="text" class="editBox" value=""/></td>'+
 '<td>'+
    '<span>'+
        '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+
    '</span>'+
 '</td>'
);

Eckiges Skript

$scope.create = function() {
       alert("Hi");
    };

Hier wird die im Controller-Teil von AngularJS aufgerufene Funktion nicht vom ng-click-Ereignis ausgelöst. Das Html wird erfolgreich angehängt, aber der ng-Klick funktioniert nicht. Nennen Sie mir Lösungen, damit es funktioniert

  • Sie müssen die neuen dom-Elemente kompilieren, damit anglejs funktioniert … führen Sie diese Manipulation in einer Direktive/einem Controller durch, in der Sie Zugriff auf den Bereich haben

    – Arun P. Johny

    9. Oktober 13 um 9:26 Uhr


  • @ArunPJohny: Ich rufe diese Funktion vom Controller auf. Aber wo soll ich die Compile-Funktion platzieren?? In einer Richtlinie??

    – Kiran Kumar

    9. Oktober 13 um 9:38 Uhr

  • Ich kenne das genaue Szenario nicht, aber Sie können etwas Ähnliches mit tun ng-include und Vorlagen.

    – Chandermani

    9. Oktober 13 um 9:43 Uhr

Immer noch keine perfekte Lösung !!! – nur um zu zeigen, wie eine dynamische Kompilierung durchgeführt werden kann

app.controller('AppController', function ($scope, $compile) {

    var $el = $('<td contenteditable><input type="text" class="editBox" value=""/></td>' +
        '<td contenteditable><input type="text" class="editBox" value=""/></td>' +
        '<td>' +
        '<span>' +
        '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>' +
        '</span>' +
        '</td>').appendTo('#newTransaction');
    $compile($el)($scope);

    $scope.create = function(){
        console.log('clicked')
    }
})

Demo: Geige

Verwenden Sie den Controller nicht zur Dom-Manipulation – dies muss mit Hilfe von Anweisungen erfolgen

  • Ich habe diese Methode bereits ausprobiert und wusste nichts über $compile … Also habe ich es von jquery aus versucht

    – Kiran Kumar

    9. Oktober 13 um 10:05 Uhr

  • @MaximShoustin: Sollten wir nicht die DOM-Manipulation vom Controller verwenden?? Irgendwelche Gründe?

    – Kiran Kumar

    9. Oktober 13 um 10:39 Uhr


  • @KiranKumar Benutzerfreundlichkeit, Codeklarheit, Wartung. Der Controller sollte sich mit der Geschäftslogik befassen, nicht mit der Manipulation von Schnittstellen.

    – Maxim Schoustin

    9. Oktober 13 um 10:44 Uhr

  • Wie können Sie dasselbe erreichen, wenn Sie HTML über einen Dienst hinzufügen, bei dem $scope nicht verfügbar ist?

    – Zugoase

    11. Dezember 17 um 9:47 Uhr

  • @trainoasis Sie können versuchen, den Bereich der übergeordneten Elemente wie zu verwenden $('#newTransaction').scope() dh $compile($el)($('#newTransaction').scope());

    – Arun P. Johny

    11. Dezember 17 um 11:24 Uhr

ng click funktioniert nicht von dynamisch generiertem HTML
Maxim Schustin

Zu machen ng-click um zu arbeiten müssen wir kompilieren diese Quelle durch Verwendung $compile Service. Angular sollte über neu generiertes HTML Bescheid wissen und daher sollte dieses HTML in den Digest-Zyklus aufgenommen werden, um es auszulösen ng-click und andere Veranstaltungen.

Sehen Geige

“Kompilator” erstellen:

.directive( 'compileData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {

      var elmnt;

      attrs.$observe( 'template', function ( myTemplate ) {
        if ( angular.isDefined( myTemplate ) ) {
          // compile the provided template against the current scope
          elmnt = $compile( myTemplate )( scope );

            element.html(""); // dummy "clear"

          element.append( elmnt );
        }
      });
    }
  };
});

danach Dummy erstellen factory das simuliert deine anhängen:

.factory( 'tempService', function () {
  return function () { 
    return '<td contenteditable><input type="text" class="editBox" value=""/></td>'+ 
            '<td contenteditable><input type="text" class="editBox" value=""/></td>'+
             '<td>'+
                '<span>'+
         '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+
              '</span>'+
            '</td>';
  };
});

Und nennen Sie es schließlich so:

<div compile-data template="{{mainPage}}"></div> 

im Controller:

$scope.newTransaction= tempService();

Für Ihr Beispiel sollte so etwas sein:

<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" >
    <tr compile-data template="{{newTransaction}}">
    </tr>
    <tr data-ng-repeat="host in hosts|filter:search:strict" >
       <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>
       <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>
    </tr>
</table>

Übrigens, im Moment können Sie dieselbe Direktive für Ihren Code verwenden und jedes dynamische HTML kompilieren.

  • Sollte ich das Anhängen der html from-Direktive implementieren, anstatt es mit jquery zu tun?

    – Kiran Kumar

    9. Oktober 13 um 9:36 Uhr

  • Wie ich in meinem Beispiel gezeigt habe, verwenden Sie Service und fügen Sie einen Controller hinzu $scope.newTransaction= tempService();

    – Maxim Schoustin

    9. Oktober 13 um 9:39 Uhr

  • @KiranKumar hat Fiddle hinzugefügt, damit Sie nachvollziehen können, wie es funktioniert

    – Maxim Schoustin

    9. Oktober 13 um 9:52 Uhr

  • Teilen Sie einfach meinen Fall, ich benutze Lenker um die Vorlage für die Tabelle zu laden, da ng-repeat langsam ist, wenn die Daten größer werden. Ich wende @Maxim Shoustin Lösung mit an $compile( handleCompiledContent )( scope ); bevor ich es an das DOM anhänge, füge ich es dann mit jQuery ein. Es funktioniert on-the-fly. Aber eines ist zu betonen, die this im Lenker für ng-click will funktioniert nicht, wenn es unter einer Objekt- oder Array-Schleife gerendert wird. Es bezieht sich stattdessen auf die Objekt-/Array-Variable in der Lenkstange.

    – simongcc

    6. November 15 um 7:29 Uhr

  • Was ist, wenn ich ein vordefiniertes div mit der angegebenen Anweisung zum Kompilieren von Daten haben kann, weil der Dienst es erstellt? Und kann auch nicht über $scope innerhalb des Dienstes kompilieren … Ich würde div mit der Anweisung “compile-data” einfügen, aber wer würde das zuerst kompilieren, um die Anweisung zu erkennen … dann das gleiche Problem für mich?

    – Zugoase

    11. Dezember 17 um 9:55 Uhr

Sie können verwenden angular.element(this).scope() ohne Verwendung von ng-click

und ändern

'<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'

Zu

'<button id="createHost" class="btn btn-mini btn-success" onclick="angular.element(this).scope().create()"><b>Create</b></button>'

ist gut

  • Können wir das ohne Umfang tun? Ich habe meine Popup-Vorlage deklariert, während ich ein Popup in der Fabrik erstellt habe.

    – Mobiler Evangelist

    18. Mai 17 um 10:37 Uhr

  • Wie sende ich Parameter init?

    – Sanna

    24. Januar 18 um 17:24 Uhr

  • @Sana angle.element(this).scope().init(1,’false’); so einfach

    – porya ras

    24. Januar 18 um 21:23 Uhr


  • Ich verwende dies, aber es heißt, Video ist nicht definiert. Jede Idee gibt ‘‘ zurück;

    – Sanna

    25. Januar 18 um 6:03 Uhr

  • Sie können ng-repeat iterating item nicht als Parameter an die Funktion übergeben.

    – Piyush Balapure

    29. Januar 18 um 13:17 Uhr

Ich musste Cordova dazu bringen, den dynamischen Link in einem neuen Fenster zu öffnen, also bestand meine Lösung darin, den ng-Klick auf das übergeordnete Element zu setzen und auf event.target zu schauen, um zu sehen, worauf geklickt wurde:

<p ng-bind-html="foo.barhtml" ng-click="generalClick($event)"></p>

dann

.controller('FooCtrl', function ($scope) {
    var html="<a href="http://www.google.com">google.com</a>";

    $scope.foo.barhtml = html.replace(/href/g, 'data-href');

    $scope.generalClick = function(event){
        // have Cordova open the link in a browser window
        window.open(event.target.attributes['data-href'].value, '_system');
    }
})

1644075726 260 ng click funktioniert nicht von dynamisch generiertem HTML
AMRESH PANDEY

Sie müssen hier den $compile-Dienst hinzufügen, der die Winkelanweisungen wie ng-click an Ihren Controller-Bereich bindet. So etwas wie:

var divTemplate="..your div template";
var temp = $compile(divTemplate)($scope); 

Dann fügen Sie es an den HTML-Code an:

angular.element(document.getElementById('foo')).append(temp);

Sie können das Ereignis auch wie folgt an das div binden:

var div = angular.element("divID");
div.bind('click', $scope.addPhoto());

  • Funktioniert nicht, wenn Sie den HTML-Code aus irgendeinem Grund innerhalb des Dienstes hinzufügen.

    – Zugoase

    11. Dezember 17 um 9:56 Uhr

  • Funktioniert nicht, wenn Sie den HTML-Code aus irgendeinem Grund innerhalb des Dienstes hinzufügen.

    – Zugoase

    11. Dezember 17 um 9:56 Uhr

.

784940cookie-checkng-click funktioniert nicht von dynamisch generiertem HTML

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy