data-ng-click Ereignisbindung an das DOM

Question

Ich bin neu bei angularjs, ich habe einen Code, in dem beim Klicken auf den 'Button' eine neue Zeile mit einem 'neuen Button' eingefügt wird, jetzt wiederum dieser 'neue Button' sollte auch ng-click-Ereignis haben. Das Problem ist, wenn ich dies versuche, wird die dynamische Zeile mit der neuen Schaltfläche hinzugefügt, aber die neue Schaltfläche erhält das Klickereignis nicht. Nach einigen Recherchen fand ich, dass ich die Element-String vor dem Hinzufügen zum DOM mit Hilfe von "$ kompilieren" Service der angularjs kompilieren sollte. aber dann der Browser werfen Fehler sagen, dass '$ Compiler ist keine Funktion' ... Bitte helfen. Vielen Dank..!! folgenden sind die Code-Schnipsel jsp Seite Code

<td> 
     <button type="button" id="clickButton" data-ng-click="insert()" 
       class="btn btn-sm btn-default"> 
       <i class="fa fa-plus fa-lg"></i> 
     </button> 
    </td> 

AngularJS Controller-Code

$scope.insert = function($compile){ 
      var tableRow ="<tr data-ng-repeat='c in ctrl.client.clientOwnerVOList' id='insertionRow"+count+"'>"+ 
       "<td>"+i+"</td>"+ 
       "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerName' name='clientOwnerName{{$index + 1}}' id='Name'></td>"+ 
       "<td class='col-lg-4'><input type='Email' class='form-control' data-ng-model='c.clientOwnerEmail' name='clientOwnerEmail{{$index + 1}}' id='Email'></td>"+ 
       "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerPhone' name='clientOwnerPhone{{$index + 1}}' id='PhoneNo'></td>"+ 
       "<td><button type='button' data-ng-click=insert() class='btn btn-sm btn-default'><i class='fa fa-plus fa-lg'></i></button></td>"+ 
       "<td><button type='button' class='btn btn-sm btn-default' onClick=$(this).closest('tr').remove();><i class='fa fa-trash fa-lg '></i></button></td>"+ 
       "</tr>"; 
       var newTableRow = $compile(tableRow)($scope); 
       $("#insertionRow").append(newTableRow); 
       i++; 
      }; 

Answer 1

Sie können eine Richtlinie erstellen, kompilieren verwendet:

app.directive('dynamic', [ '$compile', 
function ($compile) { 
    return { 
     restrict: 'A', 
     replace: true, 
     link: function (scope, ele, attrs) { 
      scope.$watch(attrs.dynamic, function (html) { 
       ele.html(html); 
       $compile(ele.contents())(scope); 
      }); 
     } 
    }; 
}]); 

Dann in Ihrem html:

<div dynamic="tableRow"></div> 

... wo Sie die Tabellenzeile angezeigt werden soll.

Answer 2

Warum sind vorbei Sie $ als Funktionsargument kompilieren? Sie sollten $ service injizieren kompilieren wie Sie $ Umfang injizieren dh in Ihrem Controller/Ihrer Direktive.

Das könnte der Grund sein, es wirft $ compile ist kein Funktionsfehler.