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!

Answer 1

您需要为此使用ng-bind-html

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

Answer 2

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

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