컨트롤러 안의 html 템플릿 안에 ng-click이 추가되면 작동하지 않습니다.

Question

함수 안에 html 템플릿을 생성하고 버튼을 추가했습니다. 내가 그렇게하고있는 이유는 d3.js v3를 사용하여 생성 된 scatterplot에서 데이터 노드를 클릭 할 때이 템플릿을 팝업으로 표시하기 때문입니다. 데이터 포인트를 클릭하면 데이터 포인트에 대한 정보와 추가 텍스트를 추가 할 수있는 텍스트 영역이 입력 상자에 팝업됩니다. 그러나 ng-click 및 ng-model과 같은 각도 지시문은 해당 버튼에 사용하면 실행되지 않습니다. 나는 뭔가를 놓치고 있는가, 아니면 내 방식이 잘못 되었습니까?

vm.addAnnotateBox = function(event) { 
    var annotateText = "<div class='annotateBox'>" + "<h5 style='font-size: 22px;color:#fff; white-space:normal;'>"; 
    annotateText = annotateText + "<h6 style='color:#dae1e1'>"; 
    annotateText = annotateText + event.label + "</h5><small style='color:#dae1e1'>"; // jscs:disable maximumLineLength 
    annotateText = annotateText + event.time + "</small>"; 
    annotateText = annotateText + "<div class='row'>"; 
    annotateText = annotateText + "<textarea rows='3' cols='50' maxlength='100' style='color:black' ng-model='vm.annotateText' autofocus></textarea>"; 
    annotateText = annotateText + "</div>"; 
    annotateText = annotateText + "<button type='button' class='btn btn-primary pull-right' ng-click='d3.select(this.parentNode).remove()'>Done</button></div>"; 
    return annotateText; 
}; 

onclick은 정상적으로 작동하지만 클릭하지 않습니다. 컨트롤러 내부에 html 템플릿을 만드는 것이 잘못 되었습니까? 나는 데이터 포인트의 클릭 속성에 위의 함수를 호출 오전 :

eventGroup.select("circle") 
      .attr("class", "dot") 
      .attr("r", 4) 
      .attr("cx", 10) 
      .attr("cy", 10) 
      .attr("fill", function(d) { return d.evtColor ? d.evtColor : "#229ae5"; }) 
      .attr("stroke", function(d) { return d.evtColor ? d.evtColor : "#229ae5"; }) 
      .attr("stroke-width", 2) 
      .on("click", vm.addAnnotateBox()); 

템플릿은 현재 클릭에 나타납니다하지만 난 "완료를 클릭에 NG-모델을 사용하여 텍스트 영역에 입력 한 텍스트를 저장할 수 없습니다 오전 "버튼을 클릭해도 원하는 기능이 실행되지 않습니다.

Answer 1

이러한 상황을 처리하는 올바른 방법은 아닙니다.

ng-show/ng-hide를 사용하면 상황에 따라 표시하거나 숨길 수 있습니다.

<div> 
<div> 
<label>First Name</label> 
<input type='input' ng-model='vm.FirstName' name=Fname /> 
</div> 
<div> 
label>Last Name</label> 
<input type='input' ng-model='vm.LastName' name=Lname /> 
<div> 
</div> 

<div class='annotateBox' ng-show="vm.showpannel"> 
<h5 style='font-size: 22px;color:#fff; white-space:normal;'> 
<h6 style='color:#dae1e1'> 
</h5><small style='color:#dae1e1'> 
</small> 
<div class='row'> 
<textarea rows='3' cols='50' maxlength='100' style='color:black' ng-model='vm.annotateText' autofocus></textarea> 
</div> 
<button type='button' class='btn btn-primary pull-right' ng-click='vm.remove()'>Done</button> 
</div>