在AngularJS中，我们可以使用指令和数据绑定轻松地动态添加HTML元素。本文将介绍如何在AngularJS应用程序中动态添加HTML元素，并将其绑定到控制器。
创建一个基本的AngularJS应用程序
首先，我们需要创建一个基本的AngularJS应用程序。以下是一个简单的示例：
-- -------------------- ---- ------- --------- ----- ----- --------------- ------ ----------------- ------- ------------ -------- ------------------------------------------------------------------------------------ --------- ----- --- - ----------------------- ---- -------------------------- ---------------- - --------------- - - ---------- ----- --- ------ ---- ---------- ----- --- ------ ---- ---------- ----- --- ------ ---- ---------- ----- --- ------ ---- ---------- ----- --- ------ --- ----- --- ----------------- - ---------- - ---------------------------- ---- ------ ------ ---- ----- ----- ---------- ------- ----- ----------------------- -------------- ------- ---- --------- ----------- ------------------------ --- ----------------- ----- ----- --------------- -- --------- --------- -- - --- ---------- ------- ------ ------- -------
这个应用程序包括一个控制器（myCtrl）和两个函数。$scope.items 数组包含一些初始项目，并且有一个 addItem 函数，它将新的项目添加到数组中。
使用 ng-repeat 显示项目
我们使用 ng-repeat 指令来显示项目列表。以下是在应用程序中使用 ng-repeat 的代码：
<ul>
<li ng-repeat="item in items">{{ item.name }} - ${{ item.price }}</li>
</ul>这里，我们使用 ng-repeat 指令来遍历 $scope.items 数组，并为每个元素创建一个 <li> 元素。ng-repeat 迭代指令可以带有过滤器、排序器和其他选项。
添加新项目
现在，我们要向应用程序动态添加新项目。我们可以添加一个按钮，并在点击时调用 addItem 函数。以下是按钮的HTML代码：
<p><button ng-click="addItem()">Add New Item</button></p>
当用户单击 "Add New Item" 按钮时，将调用 addItem() 函数，并将具有默认名称和价格的新项目添加到 $scope.items 数组中。
动态添加HTML
我们可以使用 ng-repeat 来动态地显示当前的项目列表。但是，如果我们想要添加一个新的 HTML 元素，该怎么办？幸运的是，AngularJS提供了一些机制来动态添加HTML元素。
使用 ng-bind-html-directive
首先，我们可以使用 ng-bind-html 指令来动态添加HTML元素。以下是 ng-bind-html 用于在AngularJS应用程序中动态添加HTML元素的示例代码：
<div ng-repeat="item in items">
<p>
Item Name: {{ item.name }}<br />
Item Price: ${{ item.price }}
</p>
<div ng-bind-html="item.html"></div>
</div>这里，我们在每个项目下创建一个 <div> 元素，并使用 ng-bind-html 指令将 HTML 字符串绑定到该元素。在控制器中，我们可以为每个项目设置 item.html 属性。
使用 compile 方法
第二种方法是使用 AngularJS 的编译功能。我们可以编写一个编译函数，该函数将 HTML 字符串编译为指令，并在其中实现自己的逻辑。以下是使用编译函数将
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25331