angularjs filtr nowej linii bez żadnego innego html

Próbuję przekonwertować znaki nowej linii ( \n) na html br.
Zgodnie z tą dyskusją w Grupie Google , oto co mam:

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

Dyskusja tam również radzi używać w widoku:

{{ dataFromModel | newline | html }}

Wygląda na to, że używany jest stary htmlfiltr, podczas gdy teraz powinniśmy użyć ng-bind-htmlatrybutu.

Niemniej jednak stanowi to problem: nie chcę, aby jakikolwiek kod HTML z oryginalnego ciągu ( dataFromModel) był renderowany jako HTML; tylko br's.

Na przykład, biorąc pod uwagę następujący ciąg:

Chociaż 7> 5
nadal nie chcę tutaj html i innych rzeczy ...

Chciałbym, żeby wypisał:

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

Czy jest jakiś sposób, aby to osiągnąć?

Może da się to osiągnąć tylko w html, <preformated text>sposób? Uniknie używania filtrów lub jakiegokolwiek przetwarzania.

Wszystko, co musisz zrobić, to wyświetlić tekst w elemencie, który ma ten CSS:

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

Spowoduje to przeanalizowanie i wyświetlenie \ n jako nowych wierszy. U mnie działa świetnie.

Tutaj przykład jsFiddle .

Zamiast bawić się nowymi dyrektywami, zdecydowałem się po prostu użyć 2 filtrów:

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;');
    }
});

Następnie, moim zdaniem, łączę jeden w drugi:

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

Prostszym sposobem na zrobienie tego jest utworzenie filtru, który dzieli każdy tekst na \nlistę, a następnie użycie `ng-repeat.

Filtr:

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

aw html:

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

Jeśli nie chcesz niszczyć układu niekończącymi się ciągami, użyj pre-line:

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

Nie wiem, czy Angular ma usługę usuwania html, ale wygląda na to, że musisz usunąć HTML przed przekazaniem newlineswłasnego filtra. Sposób, w jaki bym to zrobił, to poprzez niestandardową no-htmldyrektywę, do której zostanie przekazana właściwość zakresu i nazwa filtru do zastosowania po usunięciuhtml

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

Oto implementacja

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);
  };
});

Ważnym bitem jest textzmienna. Tutaj tworzę pośredni element DOM i dołączam do niego kod HTML za pomocą htmlmetody, a następnie pobieram tylko tekst za pomocą textmetody. Obie metody są dostarczane przez lite wersję jQuery w Angular .

Następna część to zastosowanie newlinefiltra, które odbywa się za pomocą $filterusługi.

Sprawdź plunker tutaj: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

Aktualizacja filtru z użyciem ng-bind-html wyglądałaby obecnie:

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

a filtr noHTML nie jest już wymagany.

rozwiązanie z pustymi przestrzeniami ma niską obsługę przeglądarki: http://caniuse.com/#search=tab-size

Trochę za późno na imprezę w tej sprawie, ale sugerowałbym niewielką poprawę, aby sprawdzić ciągi niezdefiniowane / zerowe.

Coś jak:

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

Lub (trochę mocniej)

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