AngularJS單擊事件添加的動態內容無法處理添加的內容

我剛剛在AngularJS上開始了一個新項目，我必須儘快加快速度。AngularJS單擊事件添加的動態內容無法處理添加的內容

我的一個要求是動態添加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

來源

2014-11-08 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

來源

2014-11-08 16:19:51

非常感謝，這是一個很好的幫助 – user3495052 2014-11-08 17:49:34

'foo'是什麼意思？你在哪裏調用document.getElementById（'foo'）。append（temp） – FrenkyB 2016-11-10 05:13:50

唯一完整的答案，我找到了。沒有任何頭痛的工作，因爲它也有一個乾淨的plunker演示。 – Sami 2016-12-15 12:17:47

您還可以將事件綁定到新的按鈕。

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

更新plunkr。

來源

2014-11-08 16:57:01 Mark

只需要注意一點：從Angularjs 2.0開始，jqLite將不再是Angular的一部分。所以人們現在可以開始使用jQuery了。 – Pytth 2014-11-08 17:08:10

感謝您的快速反饋球員:) – user3495052 2014-11-08 17:56:43

AngularJS單擊事件添加的動態內容無法處理添加的內容

回答

相關問題