Contenuto dinamico aggiunto con evento di clic di AngularJS che non funziona sul contenuto aggiunto

Ho appena iniziato su AngularJS questa settimana per un nuovo progetto, e devo arrivare al più presto al più presto.

Uno dei miei requisiti è quello di aggiungere il contenuto html in modo dinamico e il contenuto potrebbe avere un evento click su di esso.

Quindi il codice Angular code che ho qui sotto mostra un pulsante, e quando viene cliccato aggiunge dynamicmente un altro pulsante. Facendo clic sui pulsanti aggiunti dynamicmente, è necessario aggiungere un altro pulsante, ma non riesco a ottenere il ng-clic per lavorare sui pulsanti aggiunti dynamicmente

L’esempio del codice di lavoro è qui http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.addButton = function() { alert("button clicked"); var btnhtml = ''; angular.element(document.getElementById('foo')).append((btnhtml)); } }); 
     AngularJS Plunker  document.write('');      

Hello {{name}}!

http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview

 app.controller('MainCtrl', function($scope,$compile) { var btnhtml = ''; var temp = $compile(btnhtml)($scope); //Let's say you have element with id 'foo' in which you want to create a button angular.element(document.getElementById('foo')).append(temp); var addButton = function(){ alert('Yes Click working at dynamically added element'); } }); 

è necessario aggiungere qui il servizio $compile , che vincolerà le angular directives come ng-click al proprio scope del controllore. e non dimenticare di aggiungere la dipendenza $compile nel tuo controller come pure qui sotto.

ecco la demo del Plunker

Puoi anche associare l’evento al tuo nuovo pulsante.

  $scope.addButton = function() { alert("button clicked"); var btnhtml = ''; var newButt = angular.element(btnhtml); newButt.bind('click', $scope.addButton); angular.element(document.getElementById('foo')).append(newButt); } 

Aggiornato plunkr .