如何将html绑定到外部组件？ （角）

Question

我们已经消耗与元件的外部库，我们想用的组件之一是警告模式，即表示为这样：

<alert dismissible="false">Enter your text here</alert> 

它呈现出来：

<alert dismissible="false" initialized="true"> 
    <div class="alert-inside alert-type-info" aria-hidden="false" role="alert"> 
    <div region-container="content"> 
     <span> 
     <span class="ng-binding ng-scope">Enter your text here</span> 
     </span> 
    </div> 
    </div> 
</alert> 

我们已经建立了我们的角度，我们的应用程序所使用的配置变量来保存我们的内容的方式

AppConfig.EnterText= "Enter your text here"; 

在这种情况下，我们称之为警觉等等

<alert dismissible="false">{{AppConfig.EnterText}}</alert> 

的问题是，我们真的想使用一些HTML标记被放入警报...

AppConfig.EnterText= "<strong>Notice:</strong> Enter your text here"; 

在这种情况下，如果我们包括标签之间的内容，它将使标签而不是处理它们。我曾尝试

<alert dismissible="false" ng-bind-html="AppConfig.EnterText"></alert> 

这将导致内标签是与内容所替代......

<alert dismissible="false" initialized="true"> 
    <strong>Notice:</strong> Enter your text here 
</alert> 

任何人有任何建议吗？

Answer 1

为了解决这个问题，我相信你需要将ng-bind-html指令和$ sce服务一起使用。你有没有尝试将$ sce服务注入你的控制器？一旦你这样做，你可以设置你的变量是这样的：

AppConfig.EnterText= $sce.trustAsHtml("<strong>Notice:</strong> Enter your text here"); 

Answer 2

我可以用下面来解决问题：

<alert dismissible="false"> 
    <span ng-bind-html="AppConfig.EnterText"></span> 
</alert>