추가 된 항목에 angularJS 이벤트를 호출하는 방법은 무엇입니까?

Question

저는 AngularJS의 초보자이며 제목 문제를 해결할 수 없습니다. 다음 코드에서 changeText 버튼을 누르면 텍스트 영역의 텍스트가 변경됩니다. 그러나 다른 버튼 addNewButton을 눌러 추가 된 버튼 changeTextNew을 누르면이 이벤트가 발생하지 않습니다.

HTML

<div ng-app="app" ng-controller="MainCtrl"> 
<input name="widget.title" ng-model="widget.title"><br> 
<input type="button" ng-click="setText()" value="changeText"><br> 


<input type="button" id="piyo" value="addNewButton"> 
<div id="fuga"></div> 
</div> 

JS

angular.module('app', []) 
    .controller('MainCtrl', function($scope) { 
     $scope.widget = { title: 'before' }; 

     $scope.setText = function() { 
      this.widget.title = "after" 
     } 
    }); 

$(document).on('click', '#piyo', function() { 
    $('#fuga').append("<input type='button' ng-click='setText()' value='changeTextNew'><br>") 
}) 

https://jsfiddle.net/sn512/guqjatt6/

Answer 1

봅니다 AngularJS와 함께 jQuery를 사용하여 방지 할 수 있습니다.

이를 시도해보십시오`addNewButton`에 대한 당신이 'NG-click`를 사용하지 않는 이유가

angular.module('app', []) 
 
    .controller('MainCtrl', function($scope, $compile) { 
 
     $scope.widget = { title: 'before' }; 
 

 
     $scope.setText = function() { 
 
      this.widget.title = "after" 
 
     } 
 
     
 
     $(document).on('click', '#piyo', function() { 
 
      $("#fuga").append($compile("<input type='button' ng-click='setText()' value='changeTextNew'><br>")($scope)); 
 
     }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <input name="widget.title" ng-model="widget.title"><br> 
 
    <input type="button" ng-click="setText()" value="changeText"><br> 
 

 
    <input type="button" id="piyo" value="addNewButton"> 
 
    <div id="fuga"></div> 
 
</div>