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