web-dev-qa-db-ja.com

AngularJSクリックイベントで追加された動的コンテンツが追加されたコンテンツで機能しない

今週、新しいプロジェクトのためにAngularJSを始めたばかりで、できるだけ早くスピードアップする必要があります。

私の要件の1つは、htmlコンテンツを動的に追加し、そのコンテンツにクリックイベントが含まれることがあることです。

したがって、コードAngular以下にあるコードはボタンを表示し、クリックすると別のボタンを動的に追加します。動的に追加されたボタンをクリックすると、別のボタンが追加されますが、ng-クリックして動的に追加されたボタンを操作します

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

作業コードのサンプルはこちら 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');
   }

});

ここに$compileサービスを追加する必要があります。これはangular directivesのようなng-clickをコントローラースコープにバインドします。以下のように、コントローラに$compile依存関係を追加することを忘れないでください。

plunker demo

45
K.Toress

イベントを新しいボタンにバインドすることもできます。

  $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 .

1
Mark