如何将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>