Question

我有一个动态创建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>

但这不起作用。它没有约束力。我知道我做错了什么？

Answer 1

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

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

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

1 个答案: