通过 Angular JS 过滤器返回功能性 HTML 代码

Question

我正在尝试通过 angular 过滤任何文本以返回一个很棒的字体图标。相反，它只是返回纯文本。有人知道修复吗？谢谢！

.filter('textToIcon', function($sce) {
return function(text) {
    if(text!==''){
        return '<i class="fa fa-child"></i>';
    }
}

Answer 1

这是“严格概念转义”(SCE) 的实际应用。
有关它是什么以及它是如何工作的更多信息，请查看 this answer。

简而言之，Angular 试图保护您的用户免受可能对他们造成不良影响的不受信任的内容的影响。如果您知道这些值可以安全地解释为 HTML，则可以采用两种方法：

1. 导入ngSanitize（它可以作为单独的模块使用）并将其作为依赖项添加到您的模块中（例如angular.module('myApp', ['ngSanitize'])）。您已设置（只要您将安全值传递给ngBindHtml）！

2. 使用$sce 指定某些内容（由您）明确信任以用作 HTML：

   .filter('textToIcon', function ($sce) { 返回函数（文本）{ 如果（文本）{ 返回 $sce.trustAsHtml(''); } }; })

---

强烈推荐前一种方法！