We have included an external library in our project that contains various components. One of the components is an alert modal, which is used like this:
<alert dismissible="false">Enter your text here</alert>
When rendered, it looks like this:
<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>
In our Angular app, we store content using config variables, like so:
AppConfig.EnterText= "Enter your text here";
To display this content in the alert, we use the following syntax:
<alert dismissible="false">{{AppConfig.EnterText}}</alert>
The issue arises when we want to include HTML markup in the content...
AppConfig.EnterText= "<strong>Notice:</strong> Enter your text here";
If we try to bind this HTML content directly, the tags are displayed as text instead of rendering them. We attempted:
<alert dismissible="false" ng-bind-html="AppConfig.EnterText"></alert>
This just results in the inner tags being replaced with the content...
<alert dismissible="false" initialized="true">
<strong>Notice:</strong> Enter your text here
</alert>
Any suggestions on how to solve this?