Menu
I just started on AngularJS this week for a new project, and I have to come up to speed ASAP.
One of my requirements, is to add html content dynamically and that content might have a click event on it.
So the code Angular code I have below displays a button, and when clicked, it dynamically adds another button. Clicking on the dynamically added buttons, should add another button, but I cannot get the ng-click to work on the dynamically added buttons
<button type="button" id="btn1" ng-click="addButton()">Click Me</button>
The working code sample is here 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
895
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');
}
});
you need to add $compile service here, that will bind the angular directives like ng-click to your controller scope. and dont forget to add $compile dependency in your controller as well like below.
here is the plunker demo
149
You could also bind the event to your new button.
$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);
}
Updated plunkr.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
