web-dev-qa-db-fra.com

Contenu dynamique ajouté avec l'événement de clic AngularJS ne fonctionnant pas sur le contenu ajouté

Je viens de commencer sur AngularJS cette semaine pour un nouveau projet, et je dois accélérer le plus tôt possible.

L'une de mes exigences est d'ajouter du contenu html de manière dynamique et ce contenu peut avoir un événement de clic dessus.

Ainsi, le code Angular code que j'ai ci-dessous affiche un bouton, et lorsqu'il est cliqué, il ajoute dynamiquement un autre bouton. Cliquer sur les boutons ajoutés dynamiquement, devrait ajouter un autre bouton, mais je ne peux pas obtenir le ng- cliquez pour travailler sur les boutons ajoutés dynamiquement

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

L'exemple de code de travail est ici 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

angularjsangularjs-ng-clickdynamic-html
21
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');
   }

});

vous devez ajouter $compile service ici, qui liera le angular directives comme ng-click à la portée de votre contrôleur. et n'oubliez pas d'ajouter $compile dépendance dans votre contrôleur ainsi que ci-dessous.

voici la démo de plunker

45
K.Toress

Vous pouvez également lier l'événement à votre nouveau bouton.

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

Plunker mis à jour .

1
Mark