AngularJS：将数据绑定到动态创建的HTML

Question

I have a script that dynamically creates HTML form fields. I am trying to use Angular directives to bind data. I believe the binding is not occurring because the HTML elements are not there on page load since they are being dynamically created. Here is my HTML:

<div id="form-builder-wrapper">
      <form class="form-horizontal" role="form" autocomplete="off">
          <ul class="handles">
              <br />
              <!--Dynamic HTML is being appended here with jQuery-->
          </ul>
          <button class="btn btn-primary m-t-20 hide" type="submit">Submit</button>
      </form>
</div>

My jQuery is dynamically appending my HTML elements in the form above. Here is a sample element that is being appended:

<div class="form-group requiredField" id="element_1" data-type="textbox">
    <label for="element_label_1" class="col-sm-3 control-label" ng-bind="element_label_1">First Name</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" name="element_1" id="element_label_1" required="">
    </div>
</div>

As you can see, in my label field, I am attaching a ng-bind="element_label_1" directive. I am attempting to update the label with this code:

<p>Update Label: <input type="text" ng-model="element_label_1"></p>

But this is not working. It is not binding together. Any idea of what I am doing wrong?

Answer 1

If you're adding to the DOM tree after DOM load, you've likely missed the compilation/linking process that Angular does. You'll have to manually compile and link your new elements using the $compile service.

 parent.append(element);
 $compile(element)($scope);