0

I have a scenario. I have a comment box for the users where they can put comments with new line like:

This is my comment.
Part of comment in new line

I am saving in database as : 

model.Description = model.Comment.Replace("\n", "<br />");
//Insert into DB

Now while showing it on AngularJs View, it is showing something like:

This is my comment. <br /> Part of comment in new line

**My html : **

<style>
    .angular-with-newlines {
        white-space: pre;
    }
</style>

<div class="ads-details-info col-md-8 angular-with-newlines">
    {{comment}}
</div>

Output:

123123123123 \n 123123123123 <br /> 123123123123 \\n

I want to render <br /> as new line. I know there are some solutions available like: trustAsHtml and ng-bind-html. But then it becomes vulnerable to XSS attack. Which I don't want. I want to allow only some selected tags. Is there any solution available?

I have seen Preserve line breaks in angularjs . But solutions did not work for me. I don't want comment to be rendered as code and white-space: pre; did not work for me.

Community
  • 1
  • 1
Usman Khalid
  • 3,032
  • 9
  • 41
  • 66
  • I have seen this solution as well. And it is not the solution in my case. FYI 
     did not work. It will start showing as code. I don't want to show comment as code.
     – Usman Khalid Sep 04 '15 at 15:13
  • The accepted answer in the duplicate is not very good. Read the other answers. – JJJ Sep 04 '15 at 15:14
  • I have tried all the solution given in that post. Nothing worked. Even white-space: pre-wrap; did not work. – Usman Khalid Sep 04 '15 at 15:15
  • I very much doubt that. Did you realize that you shouldn't replace newlines if you use `pre-wrap`? – JJJ Sep 04 '15 at 15:16
  • Yes I replaced the
    with \n but did not work. \n is rendered as it is.     – Usman Khalid Sep 04 '15 at 15:21
  • Then you actually replaced it with `"\\n"`. It is simply not possible to display the newline character as `\n` in HTML. – JJJ Sep 04 '15 at 15:23
  • Nothing is working. Tried
    , \n, \\n ..     – Usman Khalid Sep 04 '15 at 15:26
  • Well, good luck solving it on your own. Without seeing code it's impossible to help. – JJJ Sep 04 '15 at 15:27
  • @Juhana Edited my question. – Usman Khalid Sep 04 '15 at 15:45
  • As I said, if you see a \n in the output, you don't actually have a newline character there. http://jsfiddle.net/ryavmpy0/ You'll have to show your **actual** code and your **actual** values. And before you do that, please make sure that it really replicates your problem. – JJJ Sep 04 '15 at 15:51
  • I created new data and it started working. But why there is extra space on the start? – Usman Khalid Sep 04 '15 at 16:01
  • You can vote to reopen your own question. Click the "reopen" link below. – peterh Sep 04 '15 at 16:11
  • The extra space comes from the space that's in the HTML. You'll have to remove all spacing between the tags and the content. http://jsfiddle.net/ryavmpy0/7/ – JJJ Sep 04 '15 at 16:27
  • @Juhana That works perfectly. Thanks. – Usman Khalid Sep 05 '15 at 07:55

1 Answers1

-1

Use with ng-bind-html like this, then <br/> will be rendered as html expression

<div ng-bind-html="expression" ></div>
Mudasser Ajaz
  • 6,197
  • 1
  • 26
  • 29