filtro di nuova riga angularjs senza altro HTML

Sto cercando di convertire i caratteri di nuova riga ( \n) in html br.
Secondo questa discussione nel gruppo Google , ecco cosa ho:

myApp.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
});

La discussione consiglia inoltre di utilizzare quanto segue nella vista:

{{ dataFromModel | newline | html }}

Questo sembra usare il vecchio htmlfiltro, mentre ora dovremmo usare l' ng-bind-htmlattributo.

Indipendentemente da ciò, questo pone un problema: non voglio che alcun HTML dalla stringa originale ( dataFromModel) venga visualizzato come HTML; solo il br's.

Ad esempio, data la seguente stringa:

Anche se 7> 5
non voglio ancora HTML e roba qui ...

Vorrei che producesse:

While 7 &gt; 5<br>I still don't want html &amp; stuff in here...

C'è un modo per farlo?

Forse puoi farlo solo con html, un <preformated text>modo? Eviterà di utilizzare filtri o di eseguire qualsiasi tipo di elaborazione.

Tutto quello che devi fare è visualizzare il testo all'interno di un elemento che ha questo CSS:

<p style="white-space: pre;">{{ MyMultiLineText}}</p>

Questo analizzerà e visualizzerà \ n come nuove righe. Funziona alla grande per me.

Qui, un esempio di jsFiddle .

Invece di scherzare con le nuove direttive, ho deciso di usare solo 2 filtri:

App.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
})
.filter('noHTML', function () {
    return function(text) {
        return text
                .replace(/&/g, '&amp;')
                .replace(/>/g, '&gt;')
                .replace(/</g, '&lt;');
    }
});

Quindi, a mio avviso, ne convinco l'uno nell'altro:

<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>

Un modo più semplice per farlo è creare un filtro che divida il testo in ciascuno di essi \nin un elenco, quindi utilizzare `ng-repeat.

Il filtro:

App.filter('newlines', function() {
  return function(text) {
    return text.split(/\n/g);
  };
});

e nell'html:

<span ng-repeat="line in (text | newlines) track by $index">
    <p> {{line}}</p>
    <br>
</span>

Se non vuoi distruggere il layout con stringhe infinite, usa la pre-riga:

<p style="white-space: pre-line;">{{ MyMultiLineText}}</p>

Non so se Angular ha un servizio per rimuovere html, ma sembra che sia necessario rimuovere html prima di passare il newlinesfiltro personalizzato. Il modo in cui lo farei è attraverso una no-htmldirettiva personalizzata , a cui verrebbe passata una proprietà di ambito e il nome di un filtro da applicare dopo aver rimosso ilhtml

<div no-html="data" post-filter="newlines"></div>

Ecco l'implementazione

app.directive('noHtml', function($filter){
  return function(scope, element, attrs){
    var html = scope[attrs.noHtml];
    var text = angular.element("<div>").html(html).text();

    // post filter
    var filter = attrs.postFilter;
    var result = $filter(filter)(text);

    // apending html
    element.html(result);
  };
});

La parte importante è il file text variabile. Qui creo un elemento DOM intermedio e gli accodo l'HTML usando il htmlmetodo e poi recupero solo il testo con il textmetodo. Entrambi i metodi sono forniti dalla versione lite di Angular di jQuery .

La parte seguente consiste nell'applicazione del newlinefiltro, che viene eseguita utilizzando il $filterservizio.

Controlla il plunker qui: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

Un aggiornamento al filtro con ng-bind-html attualmente sarebbe:

myApp.filter('newlines', function () {
  return function(text) {
    return text.replace(/(&#13;)?&#10;/g, '<br/>');
  }
});

e il filtro noHTML non è più necessario.

la soluzione per spazi bianchi sta avendo un basso supporto del browser: http://caniuse.com/#search=tab-size

Un po 'in ritardo per la festa su questo, ma suggerirei un piccolo miglioramento per verificare la presenza di stringhe non definite / nulle.

Qualcosa di simile a:

.filter('newlines', function () {
    return function(text) {
        return (text) ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})

Oppure (un po 'più stretto)

.filter('newlines', function () {
    return function(text) {
        return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})