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

我们已经使用了一个包含我们想要使用的组件的外部库，其中一个组件是警报模式，如下所示：

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

在这种情况下，我们可以这样称为警报

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

{{AppConfig.EnterText}

问题是我们实际上想要使用一些html标记来放入警报

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

AppConfig.EnterText=“注意：在此处输入文本”；

在这种情况下，如果我们在标记之间包含内容，它将呈现标记而不是处理它们。我试过了

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

这将导致内部标记被替换为内容

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

注意：在此处输入文本

---

有人有什么建议吗？

要解决这个问题，我相信您需要将ng bind html指令与$sce服务结合使用。您是否尝试将$sce服务注入控制器？完成此操作后，可以按如下方式设置变量：

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

AppConfig.EnterText=$sce.trustAsHtml（注意：在此处输入文本”）；

我通过以下方法解决了问题：

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

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

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