Format a text before displaying it in Angularjs

Question

I have a text like:

Blablabla
Hello
How are you?

But it has to be stored in my database in the same text field like this:

Blablabla Hello How are you?

I am using Angular and I would like to know how to format the database text before displaying it inside the template like this.

<p>{{ value }}</p>

I know I should add a separator in the database but I don't know if it's possible to add a '\n' for example and then format the text before displaying it.

Make sure the line breaks are in the text in the first place, and use CSS to preserve them: developer.mozilla.org/fr/docs/Web/CSS/white-space — JB Nizet
– JB Nizet, Commented Jun 15, 2016 at 9:48
As with any user input sanitize it before sending to the view — charlietfl
– charlietfl, Commented Jun 15, 2016 at 9:59
How can I make sure the line breaks are in the text? By editing the wrong text that is already in the database, and fixing the code that inserts text with line breaks but removes them. — JB Nizet
– JB Nizet, Commented Jun 15, 2016 at 10:04

miquelarranz · Accepted Answer · 2016-06-15 10:33:14Z

4

Try this

In your controller

$scope.value = $scope.value.replace(/\n/g, '<br/>');
$scope.trustedHtml = $sce.trustAsHtml($scope.value);

in your view

<p ng-bind-html="trustedHtml"></p>

OR

you can create a factory to use it everywhere

angular.module('app').filter('trustedHtml', function($sce) {
  return function(val) {
      return $sce.trustAsHtml(val);
  };
});

In your controller

 $scope.value = $scope.value.replace(/\n/g, '<br/>');

in your view

 <p ng-bind-html="value | trustedHtml"></p>

SOLUTION:

 <p ng-bind-html="value"></p>

So Angular $sanitize deletes the tags that may be malicious like 'script'

edited Jun 15, 2016 at 10:33

miquelarranz

90411 silver badges27 bronze badges

answered Jun 15, 2016 at 9:52

Pravesh Khatri

2,28418 silver badges22 bronze badges

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

3 Comments

miquelarranz Over a year ago

The problem is that the text is being sent by users and I think it's not save to display it with ng-blind-html, they can add malicious scripts right?

miquelarranz Over a year ago

Yes I think so but using ng-bind-html="trustedHtml" may be unsafe? I mean, can the users inject scripts?

miquelarranz Over a year ago

Okay I have used ng-bind-html="value" instead of trustAsHtml, so $sanitize filter the tags that may be unsafe like scripts

Collectives™ on Stack Overflow

Format a text before displaying it in Angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related