filter baris baru angularjs tanpa html lain

Saya mencoba untuk mengubah karakter baris baru ( \n) menjadi html br.
Sesuai diskusi di Google Grup ini , inilah yang saya dapatkan:

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

Diskusi di sana juga menyarankan untuk menggunakan yang berikut ini dalam tampilan:

{{ dataFromModel | newline | html }}

Ini sepertinya menggunakan htmlfilter lama , sedangkan sekarang kita seharusnya menggunakan ng-bind-htmlatribut.

Terlepas dari itu, ini menimbulkan masalah: Saya tidak ingin HTML dari string asli ( dataFromModel) dirender sebagai HTML; hanya britu.

Misalnya, diberikan string berikut:

Sementara 7> 5
saya masih tidak ingin html & barang di sini ...

Saya ingin menghasilkan:

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

Apakah ada cara untuk melakukannya?

Mungkin Anda bisa mencapai ini hanya dengan html, suatu <preformated text>cara? Ini akan menghindari penggunaan filter atau melakukan pemrosesan apa pun.

Yang harus Anda lakukan adalah menampilkan teks di dalam elemen yang memiliki CSS ini:

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

Ini akan mengurai dan menampilkan \ n sebagai baris baru. Berfungsi bagus untuk saya.

Ini, contoh jsFiddle .

Alih-alih mengotak-atik arahan baru, saya memutuskan untuk hanya menggunakan 2 filter:

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

Kemudian, dalam pandangan saya, saya menyalurkan satu ke yang lain:

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

Cara yang lebih sederhana untuk melakukannya adalah dengan membuat filter yang memisahkan teks di masing \n- masing menjadi daftar, lalu menggunakan `ng-repeat.

Filter:

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

dan di html:

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

Jika Anda tidak ingin menghancurkan tata letak dengan string tanpa akhir, gunakan pre-line:

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

Saya tidak tahu apakah Angular memiliki layanan untuk menghapus html, tetapi tampaknya Anda perlu menghapus html sebelum meneruskan newlinesfilter kustom Anda . Cara saya melakukannya adalah melalui no-htmlarahan khusus , yang akan melewati properti cakupan dan nama filter untuk diterapkan setelah menghapushtml

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

Berikut implementasinya

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

Bit yang penting adalah textvariabelnya. Di sini saya membuat elemen DOM perantara dan menambahkannya ke HTML menggunakan htmlmetode dan kemudian hanya mengambil teks dengan textmetode tersebut. Kedua metode ini disediakan oleh jQuery versi lite Angular .

Bagian berikut menerapkan newlinefilter, yang dilakukan dengan menggunakan $filterlayanan.

Periksa plunker di sini: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

Pembaruan pada filter dengan ng-bind-html saat ini adalah:

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

dan filter noHTML tidak lagi diperlukan.

solusi white-space memiliki dukungan browser yang rendah: http://caniuse.com/#search=tab-size

Agak terlambat ke pesta tentang ini tetapi saya akan menyarankan perbaikan kecil untuk memeriksa string yang tidak ditentukan / nol.

Sesuatu seperti:

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

Atau (sedikit lebih ketat)

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