2015-01-23 2 views
0

ng-repeat 요소에 요소를 추가하는 데 어려움을 겪고 있습니다. 여기에 바이올린 링크 내가, 그것은 기존 행을 제거합니다 '+'를 클릭하고 새 행을 생성angularjs에서 ngrepeated 요소에 행을 추가하는 방법은 무엇입니까?

http://jsfiddle.net/ukgym9f9/4/

app.directive("addAgendaRow", function($compile){ 
    return{ 
    restrict: 'A', 
    link: function(scope, element,attrs,controller){ 
     element.on("click", function() { 
      console.log("clicked on add row"); 
      $compile(element.parent().parent().parent().append('<tr class="add-remove-row" title="title"><td><div class="has-placeholder" placeholder="Your text Goes Here" contenteditable="true"></div></td><td class="add-remove-row"><a href="javascript:void(0);" add-agenda-row class="add" title="Add Row"></a> <a href="javascript:void(0);" remove-agenda-row class="remove" title="Remove Row"></a></td></tr>'))(scope); 
     }); 
    } 
    } 
}); 

에게 있습니다. 이 문제를 어떻게 해결할 수 있습니까? 사전에

감사합니다 .. $compile이 클릭 이벤트가 발생할 때 할 필요가 없습니다

+0

피들을 확인하십시오. 전혀 작동하지 않습니다. '

'가 누락 되었습니까? – DonJuwe

답변

0

. .closest()을 사용해 DOM 트리를 버리고 추가하십시오. <table> :

app.directive("addAgendaRow", function() { 
    return { 
     restrict: 'A', 
      link: function(scope, element, attrs, controller) { 
       element.on("click", function() { 
        element.closest("table").append('<tr class="add-remove-row" title="title"><td><div class="has-placeholder" placeholder="Your text Goes Here" contenteditable="true"></div></td><td class="add-remove-row"><a href="javascript:void(0);" add-agenda-row class="add" title="Add Row"></a> <a href="javascript:void(0);" remove-agenda-row class="remove" title="Remove Row"></a></td></tr>'); 
       }); 
      } 
     } 
}); 
+0

만약 제가 complile을 제거한다면, Angular bind는 add-row 버튼을 어떻게 클릭합니까? – BeginnertoUI