Nội dung động được thêm vào với sự kiện nhấp AngularJS không hoạt động trên nội dung được thêm

Tôi vừa mới bắt đầu với AngularJS trong tuần này cho một dự án mới và tôi phải tăng tốc ASAP.Nội dung động được thêm vào với sự kiện nhấp AngularJS không hoạt động trên nội dung được thêm

Một trong những yêu cầu của tôi là thêm nội dung html động và nội dung đó có thể có sự kiện nhấp chuột trên đó.

Vì vậy, mã Mã Angular mà tôi có bên dưới sẽ hiển thị một nút và khi được nhấp, nút này sẽ tự động thêm một nút khác. Nhấp vào nút tự động thêm vào, nên thêm một nút khác, nhưng tôi không thể có được ng nhấp chuột phải để làm việc trên các nút tự động thêm vào

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

Các mẫu mã làm việc ở đây 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

Nguồn

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

});

bạn cần thêm $compile dịch vụ tại đây, sẽ ràng buộc angular directives như ng-click vào phạm vi bộ điều khiển của bạn. và đừng quên để thêm $compile phụ thuộc vào bộ điều khiển của bạn cũng như dưới đây.

đây là plunker demo

Nguồn

2014-11-08 16:19:51

Cảm ơn rất nhiều, đây là một trợ giúp tuyệt vời – user3495052

Ý của bạn là gì với 'foo'? Nơi bạn gọi document.getElementById ('foo'). Chắp thêm (tạm) – FrenkyB

Câu trả lời hoàn chỉnh duy nhất, tôi tìm thấy. Có nó làm việc mà không có bất kỳ đau đầu, bởi vì nó có một bản demo plunker sạch là tốt. – Sami

Bạn cũng có thể liên kết sự kiện với nút mới của mình.

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

Đã cập nhật plunkr.

Nguồn

2014-11-08 16:57:01 Mark

Chỉ cần một chút lưu ý nhỏ gọn: như của Angularjs 2.0, jqLite sẽ không còn là một phần của Angular nữa. Vì vậy, mọi người cũng có thể bắt đầu sử dụng jQuery ngay bây giờ. – Pytth

Cảm ơn những người phản hồi nhanh :) – user3495052

Nội dung động được thêm vào với sự kiện nhấp AngularJS không hoạt động trên nội dung được thêm

Trả lời

Các vấn đề liên quan