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

Posted 2023-04-14

【中文标题】AngularJS：将数据绑定到动态创建的 HTML

【英文标题】：AngularJS: Binding Data to Dynamically Created HTML

【发布时间】：2015-01-26 03:06:36

【问题描述】：

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

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

【问题讨论】：

最大的问题是在 Angular 应用程序中使用 jQuery 附加到 DOM。如果没有通过$compile 运行的html，角度无法初始化任何指令

@charlietfl 我是一个有角度的新手，你介意给出一个我可以使用的完整代码示例吗？

喜欢@pixelbits 我有点不情愿没有看到你的一些代码。迁移可能很容易，或者可以很容易地放入指令中，您可以访问角度范围以使用$compile。如果您尝试在沉重的 jQuery 页面上添加 angular，那么这可能根本不是一个好主意。更好地概述您的发展状况将有助于确定

【参考方案1】：

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

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

【讨论】：

我是一个有角度的新手，你介意给出一个我可以使用的完整代码示例吗？

我会的，但是您没有发布足够的代码让我猜测确切的解决方案。您能否发布将新元素添加到 DOM 的代码，也包括 ngController