javascript - AngularJS:将数据绑定(bind)到动态创建的 HTML

Question

我有一个可以动态创建 HTML 表单字段的脚本。我正在尝试使用 Angular 指令来绑定(bind)数据。我相信绑定(bind)没有发生，因为 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" 指令。我正在尝试使用以下代码更新标签:

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

但这不起作用。它不绑定(bind)在一起。知道我做错了什么吗？

Answer 1

如果您在 DOM 加载后添加到 DOM 树，您可能会错过 Angular 所做的编译/链接过程。您必须使用 $compile 服务手动编译和链接新元素。

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