html tags considered as plain text when using angular directives

Question

for example:

function foo() located in my controller:

              $scope.getOffers = function(){
                 var txt1="aaaa"+"<br>"+"bbbb";
                  $scope.newData = txt1;
              };

and my html:

                <div class="help-block" ng-show="newData ">{{ offers }}</div>

and when I called foo() the text that showed up was: aaaa<br>bbbb instead of :

        aaaa
        bbbb

(I already tried to insert \n in my text...) What am I missing? and how can I fix the problem?

thanks!

you can use helpers like .trustAsHtml() or ng-bind-html to help with this, but if you are trying to structure your variables to hold HTML in the first place, you are probably not fully embracing the angular paradigm. — Claies
– Claies, Commented Apr 25, 2016 at 11:06
try with ng-bind-html-unsafe, you can check this fiddle jsfiddle.net/VFVMv — user3045179
– user3045179, Commented Apr 25, 2016 at 11:08

Kevin Boosten · Accepted Answer · 2016-04-25 11:08:15Z

1

And don't forget to trust the html. https://docs.angularjs.org/api/ng/service/$sce

See this plunker http://embed.plnkr.co/HAKJ2iknZeeEOsgukoGd/

answered Apr 25, 2016 at 11:08

Kevin Boosten

3542 silver badges11 bronze badges

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

1 Comment

user9 Over a year ago

thanks! the combinition of the 2 answers is perfect! Can you please tell me what is ` $sce`?

aseferov · Accepted Answer · 2016-04-25 11:04:35Z

1

you need use ng-bind-html for this

 <div class="help-block" ng-show="newData " ng-bind-html="offers"></div>

answered Apr 25, 2016 at 11:04

aseferov

6,4233 gold badges20 silver badges24 bronze badges

Collectives™ on Stack Overflow

html tags considered as plain text when using angular directives

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related