AngularJS：如何动态添加HTML并绑定到控制器-JavaScript中文网-JavaScript教程资源分享门户

AngularJS：如何动态添加HTML并绑定到控制器

在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