angularjs - not - ng-init
El contenido dinámico agregado con el evento de clic AngularJS no funciona en el contenido agregado (2)
También podría vincular el evento a su nuevo botón.
$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);
}
Actualizado plunkr .
Acabo de comenzar en AngularJS esta semana para un nuevo proyecto, y tengo que llegar a la velocidad lo antes posible.
Uno de mis requisitos, es agregar contenido html dinámicamente y ese contenido podría tener un evento de clic en él.
Por lo tanto, el código Código angular que tengo debajo muestra un botón, y cuando se hace clic, agrega otro botón dinámicamente. Al hacer clic en los botones agregados dinámicamente, debería agregarse otro botón, pero no puedo hacer que el botón "ng" funcione para los botones agregados dinámicamente.
<button type="button" id="btn1" ng-click="addButton()">Click Me</button>
El ejemplo del código de trabajo se encuentra aquí 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>
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'');
}
});
Debe agregar el servicio $compile aquí, que vinculará las angular directives como ng-click al alcance de su controlador. y no olvide agregar la dependencia de $compile en su controlador, como se muestra a continuación.
Aquí está la demostración plunker