如何在 AngularJS 中动态添加带有指令的 HTML 元素？

动态添加带指令的 html

如何动态生成并向 dom 中添加包含 angularjs 指令的 html 元素？

要动态添加带有指令的 html，需要遵循以下步骤：

1. 使用 ng-compile 指令编译 html

   ng-compile 指令将一段 html 字符串编译成 angularjs 模板函数。这使 angularjs 能够解析指令并将它们与作用域连接。

   var newhtml = '<a href="javascript:void(0);" ng-click="info()">查看</a>';
   var compiledhtml = $compile(newhtml)($scope);

2. 将编译后的 html 添加到 dom

   使用 jquery 或原生 javascript 将编译后的 html添加到 dom 中。

   $('#parent-element').append(compiledhtml);

3. 调用 $apply

   编译后的 html 已添加到 dom 中，但 angularjs 尚未对其进行检测。需要调用 $apply 方法来告知 angularjs 对更改进行检查。

   $scope.$apply();

完成这些步骤后，动态生成的 html 元素将包含 angularjs 指令，并且可以访问作用域中的方法。

以上就是如何在 AngularJS 中动态添加带有指令的 HTML 元素？的详细内容，更多请关注其它相关文章！