SaintNexcis SaintNexcis - 1 year ago 60
AngularJS Question

AngularJS directive - Rendering text as HTML content

I have the following directive:

myApp.directive('testimonialCard', [function () {
return {
restrict: 'E',
replace: true,
scope: {
linkUrl: '@',
authorName: '@',
authorTitle: '@',
authorCredentials: '@',
testimonialText: '@',
testimonialTextClass: '@',
visualUrl: '@',
iconClass: '@'
controller: function () {
templateUrl: '/templates/testimonialCard.html',
transclude: false

And the following template:

<script type="text/ng-template" id="/templates/testimonialCard.html">
<a data-ng-href="{{::(linkUrl || '#') }}"
class="testimonial-card col-xs-12 col-sm-12 col-md-8 col-lg-8 {{::css_class}}"
data-ng-class="::(visualUrl)) ? 'with-icon' : 'without-icon'" >
<div class="panel panel-default">
<div class="panel-heading">
<div class="row testimonial">
<div class="col-xs-12">
<div class="testimonial-card-summary">
<span class="decorative_quote">“​‌</span>
<div class="testimonial-card-summary-text" > {{::testimonialText}} </div>
<div class="row author-info">
<h4 class="name col-xs-12">{{::authorName}}<span data-ng-if="::(authorTitle)" class="academic-degree">, {{::authorTitle}}</span></h4>
<div class="field-content credentials">{{::authorCredentials}}</div>
<span class="testimonial-card-visual pull-right" data-ng-if="::(visualUrl || iconClass)">

<img data-ng-if="::visualUrl"
class="testimonial-card-icon pull-right"
<div data-ng-if="::!visualUrl"


The end user fills out a testimonial card as such:

author-Name="John Doe"
author-Credentials="Some University Creds"
testimonial-Text="<p>Donec sollicitudin molestie malesuada.</p><p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p><p>Vivamus suscipit tortor eget felis porttitor volutpat.</p>"

As you can guess the testimonial-text is showing up as it was typed. I need to convert this to html. I've tried several different methods to convert, compile, etc. testimonial-Text to no avail. Any help is greatly appreciated!

Answer Source


In case anyone is having the same problem...

I ended up fixing it by adding the following to my controller:

controller: function ($scope,$sce,  $log) {
              $scope.testimonialContent = $sce.trustAsHtml($scope.testimonialText);

And in my template:

I changed the:

   <div class="testimonial-card-summary-text" > {{::testimonialText}} </div>

to this:

   <div class="testimonial-card-summary-text" ng-bind-html="testimonialContent"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download