Render directive in html string with AngularJS

Question

I am trying to render a directive and have it properly displayed in HTML with AngularJS. I have a service that takes care of displaying warning messages to the users. Per controller I can call this service and set a message I want to be displayed. Now one of those messages is supposed to include a link. However as I am using the Ionic framework I need to use a directive to accomplish exactly that.

HTML:
<div class="bar bar-loading bar-assertive top-bar">
  | {{ message }}
</div>

JS:
$scope.message = "Please visit this link: <a ui-sref='app.settings.profile-show'>Open me.</a>"

However the message is not properly output in the html. If I use the following I get the html, but the directive is not evaluated:

<div class="bar bar-loading bar-assertive top-bar" ng-bind-html="message"></div>

How would I accomplish something like this? Thank you.

Answer 1

I am not sure about Ionic framework, But this is my way to render HTML content. Use $sce.trustAsHtml(html) to render text as html. Your code will look something like this.

// ... 
app.controller('yourCtrl', function ($scope,$sce) {
    $scope.message = "Please visit this link: <a ui sref='app.settings.profile-show'>Open me.</a>";
    $scope.renderHTML = function(html_code){
        return $sce.trustAsHtml(html_code);
    };
}

html

<div class="bar bar-loading bar-assertive top-bar" ng-bind-html="renderHTML(message)"></div>
<!-- or this way? -->
<div class="bar bar-loading bar-assertive top-bar">
    | {{ renderHTML(message) }}
</div>
<!-- not sure about second option, but either should work -->

Hope it helped!