在 AngularJS 中，ng-bind-html 指令用于将 HTML 字符串绑定到元素上，并将其编译为可执行的代码。然而，如果该字符串中包含 AngularJS 代码，则这些代码不会被自动编译执行，这就需要我们手动编译这些代码。
解决方案
要让 ng-bind-html 编译 AngularJS 代码，我们可以使用 $compile 服务来手动编译它们。具体步骤如下：
- 在控制器中注入 $sce 和 $compile 服务：
------------------------ ---------- ------- ----------- ---------------- ----- --------- - -- ----- ----
- 将需要编译的 HTML 字符串绑定到作用域上，并使用 $sce.trustAsHtml 方法对其进行安全性认证：
----------------- - ---------------------------------------
- 创建一个指令，在 link 函数中使用 $compile 服务编译 HTML 字符串：
---------------------------- ------------------ -
------ -
--------- ----
------ -
----------- --------------
--
----- --------------- -------- -
-------------------------- ---------------- -
---------------------
------------------------------------
---
-
--
---- 在 HTML 模板中使用该指令，将需要编译的 HTML 字符串传递给它：
---- --------------------------------
至此，ng-bind-html 就能够成功编译包含 AngularJS 代码的字符串了。
示例代码
下面是一个完整的示例代码：
--------- -----
----- ---------------
------
----- ----------------
---------------------------
-------
----- -----------------------
---- --------------------------------
------- ---------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------- ------- ----------- ---------------- ----- --------- -
----------------- - ---------------------------------------
------------ - ------- --------
----
---------------------------- ------------------ -
------ -
--------- ----
------ -
----------- --------------
--
----- --------------- -------- -
-------------------------- ---------------- -
---------------------
------------------------------------
---
-
--
---
---------
-------
-------在这个示例中，我们定义了一个 ng-app 为 myApp 的 AngularJS 应用。控制器 myCtrl 中定义了一个需要编译的 HTML 字符串，并创建了一个指令 compileHtml，用于编译该字符串。在 HTML 模板中使用了该指令，并将 HTML 字符串传递给它。最终运行效果为输出标题 "Hello, World!"。
总结
通过手动编译 AngularJS 代码，我们可以让 ng-bind-html 指令成功执行包含 AngularJS 代码的 HTML 字符串。同时，这一方法也可以帮助我们更好地理解和掌握 AngularJS 中的编译机制。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25426