angularjs 动态添加html

AngularJS是一个流行的JavaScript框架，它允许开发人员使用MVC（模型-视图-控制器）模式来构建Web应用程序。在AngularJS中，动态添加HTML是通过指令来实现的。指令是一种特殊的AngularJS组件，它允许开发人员扩展HTML语法并创建可重用的组件。在这里，我们将介绍如何使用AngularJS指令来动态添加HTML。

首先，我们需要定义一个指令来动态添加HTML。在这个例子中，我们将使用名为“htmlDynamic”的指令。这个指令将接受一个表达式作为参数，该表达式将返回要添加的HTML内容。当表达式的值发生变化时，指令将更新元素的内容并编译新的HTML。

下面是一个示例代码，展示了如何使用AngularJS指令来动态添加HTML：

var demo = angular.module('demoApp', [ 'ngSanitize' ]);

demo.directive('htmlDynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch('isDomComplete', function (val) {
if (val) {
scope.$watch(attrs.htmlDynamic, function(html) {
ele.html(html);
$compile(ele.contents())(scope);
});
}
});
}
};
});

在这个例子中，我们定义了一个名为“htmlDynamic”的指令。这个指令使用$compile服务来编译新的HTML，并将其添加到元素中。当表达式的值发生变化时，指令将更新元素的内容并重新编译新的HTML。

为了使用这个指令，我们需要在HTML中添加一个元素，并将“htmlDynamic”指令添加到该元素中。下面是一个示例代码，展示了如何在HTML中使用“htmlDynamic”指令：

<section ng-controller="DemoCtrl">
<div html-dynamic="content"></div>
</section>

在这个例子中，我们将“htmlDynamic”指令添加到一个<div>元素中，并将表达式“content”作为参数传递给指令。当表达式的值发生变化时，指令将更新<div>元素的内容并重新编译新的HTML。