new lines, br in div plain text

Question

OK this should be fairly simple...

Using angular. I output a text, which has been edited with a textarea:

{{model | newline2br}}

If I don't add the filter, all new lines are just ignored. So I did some googling, and wrote a filter, newline2br, which does just that - replacing new lines with <br />

But now the text is being displayed with literal <br />!

This is the output in the inspection window:

<div ng-show="showText" ng-mouseleave="showText = false" class="textwrapper ng-hide">asdjfhaslkjdfh aoiuyqoiweury iufyaoiusydf oiuaysdfiouy aiuysdfoiuy asdfo iuyasdf iouyasdfoiuy asdoifuy aoiusydf oiauysdfoiuays df oiauysdf iouaysdofiuy asioduyf aoiusydf oiauysdfo iuyasdoiufy aoisudyf oiuaysdifuy asdoiufysf<br />hello this is cool<br />I just found out that I can do shift-enter!<br />now I solved the problem with this... :))))</div>

Why is that? How do I write the filter correctly so that the div displays the new lines?

Can you show your code on jsfiddle? It's hard to determine what's going on. — C. S., Dec 06 '13 at 01:52
Well I didn't manage to get the jsfiddle running for angular...but the code is there: http://jsfiddle.net/VLCSL/ — transient_loop, Dec 06 '13 at 02:14

tungd · Accepted Answer · 2013-12-08T02:28:01.640

This is because AngularJS escape HTML tags in string (replace them with HTML entities) by default to save you from XSS and some other security problems as well. To display trusted content un-escaped you could use ngBindHTMLUnsafe (in older AngularJS version), or the the ngBindHTML ans SCE in 1.2 and newer. For example:

<div>{{sometext|newline2br}}</div>

Would be rewritten as (below 1.2):

<div ng-bind-html-unsafe="sometext|newline2br"></div>

With 1.2 and above:

<div ng-bind-html="sometext|newline2br|trusted"></div>

with the trusted filter:

app
  .filter('trusted', function($sce) {
    // You can use this one as `value|newline2br|trusted`, 
    // but I don't recommend it
    return function(input) {
      return $sce.trustAsHtml(input)
    }
  })

Or better with:

<div ng-bind-html="sometext|newline2br"></div>

and:

app
  .filter('newline2br', function($sce) {
    // This is my preferred way
    return function(input) {
      return $sce.trustAsHtml(input.replace(/\n/g, "<br>"))
    }
  })

Plunker: http://plnkr.co/LIxFVpi6ChtTLEni11qy

score 1 · Answer 2 · answered Dec 06 '13 at 03:04

you should probably have this as well, otherwise you will never see the text since it will never appear in the first place:

ng-init="showText=true"

The final thing you are looking for is, in addition to what tungd mentioned:

<div class="textwrapper" ng-bind-html-unsafe="model|newline2br" ng-init="showText=true" ng-show="showText" ng-mouseleave="showText = false">

Here is the fiddle to demonstrate.

score 0 · Answer 3 · answered Dec 06 '13 at 02:38

0

From my understanding, you are hiding the div, so the mouse can never go over it to show the div in the first place.

answered Dec 06 '13 at 02:38

C. S.

805
6
6

well there is an enclosing span before, which does that, but that's not relevant to question really, I think: span(ng-mouseover="showText = true") – transient_loop Dec 06 '13 at 02:42
Thanks for participating. I found the answer here: http://stackoverflow.com/questions/15449325/how-can-i-preserve-new-lines-in-an-angular-partial. I am using a
```
 now without the filter. that displays the new lines correctly
```
– transient_loop Dec 06 '13 at 02:46

new lines, br in div plain text

3 Answers3