AngularJS 클릭 이벤트가 추가 된 동적 콘텐츠가 추가 된 콘텐츠에서 작동하지 않습니다.

이번 주에 AngularJS에서 새로운 프로젝트를 시작했습니다. 최대한 빠른 속도를 내야합니다.AngularJS 클릭 이벤트가 추가 된 동적 콘텐츠가 추가 된 콘텐츠에서 작동하지 않습니다.

내 요구 사항 중 하나는 html 콘텐츠를 동적으로 추가하는 것이며 해당 콘텐츠에 클릭 이벤트가있을 수 있습니다.

코드 아래 코드는 버튼을 표시하고 클릭하면 동적으로 다른 버튼이 추가됩니다.

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

있는 동적으로 추가 버튼을 클릭하면, 다른 버튼을 추가해야하지만, 내가 얻을 수있는 동적으로 추가 버튼을 작동 NG를 클릭

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

'foo'의 의미는 무엇입니까? 어디에서 document.getElementById ('foo')를 호출하십시오. append (temp) – FrenkyB

유일하게 완전한 대답을 찾았습니다. 그것이 두려운 일없이 일 했어. 왜냐하면 그것은 똑똑한 데커도 가지고 있기 때문이다. – Sami

입니다.

$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

빠른 피드백을 보내 주셔서 감사합니다 :) – user3495052

AngularJS 클릭 이벤트가 추가 된 동적 콘텐츠가 추가 된 콘텐츠에서 작동하지 않습니다.

답변

관련 문제