ng-click werkt niet vanuit dynamisch gegenereerde HTML

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

Hoekig schrift

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

Hier wordt de functie die wordt aangeroepen in het controllergedeelte van de AngularJS niet geactiveerd door de ng-click-gebeurtenis. De Html wordt met succes toegevoegd, maar de ng-click werkt niet. Vertel me oplossingen om het te laten werken

Antwoord 1, autoriteit 100%

Nog geen perfecte oplossing!!! – gewoon om te laten zien hoe dynamische compilatie kan worden gedaan

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: Fiddle

Gebruik de controller niet voor dom-manipulatie – het moet worden gedaan met behulp van richtlijnen

Antwoord 2, autoriteit 72%

Om ng-clickte laten werken, moeten we deze bron compilerenmet behulp van de service $compile. Angular moet op de hoogte zijn van nieuw gegenereerde HTML en daarom moet deze HTML worden opgenomen in de digest-cyclus om ng-clicken andere gebeurtenissen te activeren.

Zie Fiddle

Maak “compilator”:

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

maak daarna een dummy factorydie uw toevoegingsimuleert:

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

En noem het ten slotte zo:

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

in controller:

$scope.newTransaction= tempService();

Uw voorbeeld zou zoiets moeten zijn als:

<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>

BTW, voorlopig kun je dezelfde instructie over je code gebruiken en elke dynamische HTML compileren.

Antwoord 3, autoriteit 48%

u kunt angular.element(this).scope()gebruiken zonder ng-click

en wijzigen

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

Naar

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

Antwoord 4, autoriteit 6%

Ik moest Cordova de dynamische link in een nieuw venster laten openen, dus mijn oplossing was om de ng-klik op het bovenliggende element te plaatsen en naar het event.target te kijken om te zien waar op werd geklikt:

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

dan

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

Antwoord 5, autoriteit 4%

je moet hier $compile-service toevoegen, die de hoekige richtlijnen zoals ng-click aan je controllerbereik bindt. Zoiets als:

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

Voeg het dan toe aan de HTML:

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

Je kunt de gebeurtenis ook als volgt aan de div binden:

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