在AngularJS中，我们可以使用指令和数据绑定轻松地动态添加HTML元素。本文将介绍如何在AngularJS应用程序中动态添加HTML元素，并将其绑定到控制器。
创建一个基本的AngularJS应用程序
首先，我们需要创建一个基本的AngularJS应用程序。以下是一个简单的示例：
--------- -----
----- ---------------
------
---------------- ------- ------------
------- ------------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -
------ ----- --- ------ ----
------ ----- --- ------ ----
------ ----- --- ------ ----
------ ----- --- ------ ----
------ ----- --- ------ ---
--
-------------- - ---------- -
------------------------ ---- ------ ------ ----
--
---
---------
-------
----- -----------------------
------------- ------- ---- ---------
---------- ------------------------ --- -----------------
----
--- --------------- -- --------- --------- -- - --- ---------- -------
-----
-------
-------这个应用程序包括一个控制器（myCtrl）和两个函数。$scope.items 数组包含一些初始项目，并且有一个 addItem 函数，它将新的项目添加到数组中。
使用 ng-repeat 显示项目
我们使用 ng-repeat 指令来显示项目列表。以下是在应用程序中使用 ng-repeat 的代码：
----
--- --------------- -- --------- --------- -- - --- ---------- -------
-----这里，我们使用 ng-repeat 指令来遍历 $scope.items 数组，并为每个元素创建一个 <li> 元素。ng-repeat 迭代指令可以带有过滤器、排序器和其他选项。
添加新项目
现在，我们要向应用程序动态添加新项目。我们可以添加一个按钮，并在点击时调用 addItem 函数。以下是按钮的HTML代码：
---------- ------------------------ --- -----------------
当用户单击 "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-bind-html 指令将 HTML 字符串绑定到该元素。在控制器中，我们可以为每个项目设置 item.html 属性。
使用 compile 方法
第二种方法是使用 AngularJS 的编译功能。我们可以编写一个编译函数，该函数将 HTML 字符串编译为指令，并在其中实现自己的逻辑。以下是使用编译函数将
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25331