Dynamischer Inhalt hinzugefügt mit AngularJS Klick-Ereignis funktioniert nicht mit dem hinzugefügten Inhalt

Ich habe diese Woche für ein neues Projekt auf AngularJS begonnen, und ich muss so schnell wie möglich kommen.Dynamischer Inhalt hinzugefügt mit AngularJS Klick-Ereignis funktioniert nicht mit dem hinzugefügten Inhalt

Eine meiner Anforderungen besteht darin, HTML-Inhalt dynamisch hinzuzufügen, und dieser Inhalt könnte ein Klickereignis haben.

Also der Code Winkel Code, den ich unten habe, zeigt eine Schaltfläche, und wenn sie geklickt wird, fügt sie dynamisch eine andere Schaltfläche hinzu. Ein Klick auf die dynamisch hinzugefügt Tasten muss einen anderen Knopf hinzufügen, aber ich kann das nicht bekommen ng-klicken Sie auf die dynamisch hinzugefügt Tasten arbeiten

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

Die Arbeitscodebeispiel hier ist 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

Quelle

2014-11-08 user3495052

Sie müssen hier $compile Service hinzufügen, der die angular directives wie ng-click an Ihren Controller-Bereich bindet. und vergessen Sie nicht, $compile Abhängigkeit in Ihrem Controller als auch unten hinzuzufügen.

hier ist die plunker demo

Quelle

2014-11-08 16:19:51

Vielen Dank, das ist eine große Hilfe – user3495052

Was meinst du mit 'foo'? Wo Sie document.getElementById ('foo') aufrufen. Append (temp) – FrenkyB

Die einzige vollständige Antwort, die ich gefunden habe. Es funktioniert ohne Kopfschmerzen, denn es hat auch eine saubere Demo. – Sami

Sie auch das Ereignis an Ihre neue Schaltfläche binden könnte.

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

Aktualisiert plunkr.

Quelle

2014-11-08 16:57:01 Mark

Nur ein kleiner Leckerbissen: ab Angularjs 2.0 wird jqLite nicht mehr Teil von Angular sein. Also können die Leute nun auch anfangen, jQuery zu benutzen. – Pytth

Danke für das schnelle Feedback Jungs :) – user3495052

Dynamischer Inhalt hinzugefügt mit AngularJS Klick-Ereignis funktioniert nicht mit dem hinzugefügten Inhalt

Antwort

Verwandte Themen