Contenuto dinamico aggiunto con evento di clic di AngularJS non funzionante sul contenuto aggiunto

Ho appena iniziato su AngularJS questa settimana per un nuovo progetto, e devo arrivare a velocità al più presto.Contenuto dinamico aggiunto con evento di clic di AngularJS non funzionante sul contenuto aggiunto

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

Quindi il codice di codice angolare che ho qui sotto mostra un pulsante, e quando si fa clic, aggiunge dinamicamente un altro pulsante. Facendo clic sui pulsanti aggiunti in modo dinamico, dovrebbe aggiungere un altro pulsante, ma non riesco a ottenere il ng clic per lavorare sui pulsanti aggiunti dinamicamente

<button type="button" id="btn1" ng-click="addButton()">Click Me</button>

L'esempio di 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 = '<button type="button" ng-click="addButton()">Click Me</button>'; 
 
    angular.element(document.getElementById('foo')).append((btnhtml)); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script> 
 

 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <div id="foo"> 
 
    <button type="button" id="btn1" ng-click="addButton()">Click Me 
 
    </button> 
 
    </div> 
 
</body> 
 

 
</html>

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

fonte

2014-11-08 user3495052

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

    var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>'; 
    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 $compile servizio qui, che legherà il angular directives come ng-click al tuo nell'ambito del controllore. e non dimenticare di aggiungere la dipendenza $compile nel controller come pure di seguito.

Ecco l'plunker demo

fonte

2014-11-08 16:19:51

Grazie mille, questo è un grande aiuto – user3495052

Cosa intendi con 'pippo'? Dove si chiama document.getElementById ('foo'). Append (temp) – FrenkyB

L'unica risposta completa, ho trovato. Ho funzionato senza alcun problema, perché ha anche una demo di plunker pulita. – Sami

Si potrebbe anche legare l'evento al nuovo pulsante.

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

Aggiornamento plunkr.

fonte

2014-11-08 16:57:01 Mark

Solo una piccola nota: da Angularjs 2.0, jqLite non farà più parte di Angular. Quindi le persone possono iniziare a usare jQuery adesso. – Pytth

Grazie per il feedback rapido ragazzi :) – user3495052

Contenuto dinamico aggiunto con evento di clic di AngularJS non funzionante sul contenuto aggiunto

risposta

Problemi correlati