CODEWITHSUNDEEP
stringangularjslinebreak
user3755032
user3755032

Reputation: 21

line breaks in string while binding it with angularjs

i have problem in giving line break in string while binding the data in angularJS

<h3  ng-bind="thirdContainHeaderOneTitle"></h3> 
$scope.thirdContainHeaderOneTitle = "my + '<br>' + hdjsd";

the <br>,'<br>',' \/n' are not working and i dont know why..

Upvotes: 2

Views: 9199

Answers (3)

Andy Gaskell
Andy Gaskell

Reputation: 31761

See https://docs.angularjs.org/api/ng/directive/ngBindHtml along with the posted example:

View:

<div ng-controller="ngBindHtmlCtrl">
 <p ng-bind-html="myHTML"></p>
</div>

Application:

angular.module('ngBindHtmlExample', ['ngSanitize'])

.controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
  $scope.myHTML =
     'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>';
}]);

Note that you need to include the ngSanitize module.

Upvotes: 3

Milad
Milad

Reputation: 28592

You cannot sent any html code through the $scope

Its better you use a directive and inside of that , there will be a template, then you can send any html you want like this : 

  app.directive('yourdirective',function(){
      return {
        restrict:"E",
        template:"my" + "<br>" + "hdjsd"
        } 
   });

and in your html : 

 <yourdirective></yourdirective>

Upvotes: 0

Tyler McGinnis
Tyler McGinnis

Reputation: 35276

You can't just bind html in your strings. Try something like this instead. 

<div ng-bind-html-unsafe="thirdContainHeaderOneTitle"></div>

That should parse out your HTMl and give the effect you want.

Upvotes: 0

Related Questions