Как связать 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>