Render html tags from AngularJS object

Question

I've looked up similar questions on how to render html tags within angularJS but none of them worked for me because I am using ng-repeat. Anyone have any advice.

     <div ng-repeat="o in SurveyResults.SurveyQuestions">
                    {{o.SurveyQuestionId}}
                    {{o.QuestionText}}
     </div>

My o.QuestionText has data such as How well do we deliver on our promises? Consider our responsiveness to your requests, ability to meet deadlines and accountability for the outcomes.

It displays the tags without rendering the tags.

I did try putting this in my JS file

    homePage.directive('htmlSafe', function($parse, $sce) {
    return {
        link: function(scope, elem, attr) {
            var html = attr.ngBindHtml;
            if(angular.isDefined(html)) {
                var getter = $parse(html);
                var setter = getter.assign;
                setter(scope, $sce.trustAsHtml(getter(scope)));
            }
        }
    };
});

Then setting html bind in the repeat as such

 <div ng-repeat-html="o in SurveyResults.SurveyQuestions">
                    {{o.SurveyQuestionId}}
                    {{o.QuestionText}}
     </div>

Any other advice?

SSH · Accepted Answer · 2016-03-02 00:50:14Z

1

Just use ng-bind-html, you don't need new directive

 <div ng-repeat="o in SurveyResults.SurveyQuestions">
                {{o.SurveyQuestionId}}
                <span ng-bind-html="o.QuestionText"></span>
 </div>

answered Mar 2, 2016 at 0:50

SSH

2,55316 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Render html tags from AngularJS object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related