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

Question

我试图通过角度过滤任何文字以返回字体真棒图标。相反，它只是返回纯文本。有人知道修复吗？谢谢！

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

Answer 1

这是严格的概念逃脱＆＃34; （SCE）在行动。
有关它是什么以及如何工作的更多信息，请查看 this answer 。

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

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

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

   .filter（＆＃39; textToIcon＆＃39;，function（$ sce）{     return function（text）{         if（text）{             返回$ sce.trustAsHtml（＆＃39;＆＃39;）;         }     }; }）

---

强烈建议使用前一种方法！