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

AngularJS: Binding Data to Dynamically Created HTML

本文关键字：创建 HTML 动态 数据绑定 AngularJS      更新时间：2023-09-26

我有一个动态创建HTML表单字段的脚本。我正在尝试使用 Angular 指令来绑定数据。我相信绑定没有发生，因为 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>

但这行不通。它不绑定在一起。知道我做错了什么吗？

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

 parent.append(element);
 $compile(element)($scope);
相关文章：