0

I created html template inside a function and added a button in it. The reason I am doing so is because I want this template to popup when I click on the data node in a scatterplot created using d3.js v3. So when i click on the data point, the input box should popup with the information about the data point and a textarea where I can add additional text. But angular directives such as ng-click and ng-model won't fire when used on that button. Am I missing something or my way of doing it is wrong ?

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 works fine but not ng-click. Is it wrong to create a html template inside the controller ? I am calling the above function on click attribute of the data point:

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());

The template appears on click currently but i am unable to save the text entered in the textarea using ng-model and on clicking the "Done" button, ng-click doesn't fire the desired function: enter image description here

user2128
  • 590
  • 2
  • 13
  • 35
  • 1
    Angularjs directives get bound on the page load - dynamically added elements do not get their directives bound to the controller or module. Look into the `$compile` service or writing a custom directive/component that will generate elements for you rather than manually appending to the DOM – mhodges Dec 20 '17 at 18:46
  • 2
    Possible duplicate of [Dynamically add directive in AngularJS](https://stackoverflow.com/questions/15279244/dynamically-add-directive-in-angularjs) – mhodges Dec 20 '17 at 18:50

1 Answers1

1

This is not the correct way to handle this kind of situation.

use ng-show/ng-hide to show or hide depending on the situation.

<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>
Chaminda Jayanath Udawatte
  • 164
  • 7
  • I agree and this was my first solution. But i want to add this box when clicked on each data point of a chart. Thereby each box will be confined to its respective data point. Will this solution take care of that behavior ? – user2128 Dec 20 '17 at 20:10
  • It should, furthermore it depends on your design.and give each point unique id/name. so you can distinctively hide or show. – Chaminda Jayanath Udawatte Dec 20 '17 at 20:33