AngularJS：將數據綁定到動態創建的HTML

Question

我有一個可以動態創建HTML表單字段的腳本。 我正在嘗試使用Angular指令來綁定數據。 我相信不會發生綁定，因為HTML元素是動態創建的，因此頁面加載時就沒有HTML元素。 這是我的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>

我的jQuery正在以上述形式動態附加我的HTML元素。 這是一個附加的示例元素：

<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>

如您所見，在我的label字段中，我附加了ng-bind="element_label_1"指令。 我正在嘗試使用以下代碼更新label ：

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

但這是行不通的。 它沒有綁定在一起。 任何我做錯事的想法嗎？

Answer 1

如果要在DOM加載后添加到DOM樹中，則可能錯過了Angular進行的編譯/鏈接過程。 您必須使用$ compile服務手動編譯和鏈接新元素。

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