angularjs newline filter โดยไม่มี html อื่น ๆ

ฉันพยายามที่จะแปลงตัวอักษรขึ้นบรรทัดใหม่ ( \n) เป็น HTML br's
ตามการสนทนานี้ใน Google Groupนี่คือสิ่งที่ฉันได้รับ:

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

การอภิปรายยังแนะนำให้ใช้สิ่งต่อไปนี้ในมุมมอง:

{{ dataFromModel | newline | html }}

ดูเหมือนว่าจะใช้htmlตัวกรองเก่าในขณะที่ตอนนี้เราควรใช้ng-bind-htmlแอตทริบิวต์

ไม่ว่าสิ่งนี้จะทำให้เกิดปัญหา: ฉันไม่ต้องการให้ HTML ใด ๆ จากสตริงดั้งเดิม ( dataFromModel) แสดงผลเป็น HTML เฉพาะbrของ

ตัวอย่างเช่นกำหนดสตริงต่อไปนี้:

ในขณะที่ 7> 5
ฉันยังไม่ต้องการ html & ของที่นี่ ...

ฉันต้องการให้เอาต์พุต:

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

มีวิธีใดบ้างที่จะทำสิ่งนี้ให้สำเร็จ?

บางทีคุณสามารถบรรลุสิ่งนี้ได้ด้วย html เท่านั้น<preformated text>วิธี? มันจะหลีกเลี่ยงจากการใช้ตัวกรองหรือทำการประมวลผลใด ๆ

สิ่งที่คุณต้องทำคือแสดงข้อความภายในองค์ประกอบที่มี CSS นี้:

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

สิ่งนี้จะแยกวิเคราะห์และแสดง \ n เป็นบรรทัดใหม่ ใช้งานได้ดีสำหรับฉัน

นี่เป็นตัวอย่าง jsFiddle

แทนที่จะยุ่งกับคำสั่งใหม่ฉันตัดสินใจใช้แค่ 2 ตัวกรอง:

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

จากนั้นในมุมมองของฉันฉันต่อท่อเข้าอีกอัน:

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

วิธีที่ง่ายกว่านี้คือการสร้างตัวกรองที่แยกข้อความ\nออกเป็นรายการจากนั้นใช้ `ng-repeat

ตัวกรอง:

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

และใน html:

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

หากคุณไม่ต้องการทำลายเค้าโครงด้วยสตริงที่ไม่มีที่สิ้นสุดให้ใช้ pre-line:

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

ฉันไม่ทราบว่า Angular มีบริการดึง html หรือไม่ แต่ดูเหมือนว่าคุณต้องลบ html ก่อนที่จะส่งผ่านnewlinesตัวกรองที่กำหนดเอง วิธีที่ฉันจะทำคือใช้no-htmlคำสั่งที่กำหนดเองซึ่งจะถูกส่งผ่านคุณสมบัติขอบเขตและชื่อของตัวกรองที่จะใช้หลังจากลบhtml

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

นี่คือการใช้งาน

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

บิตที่สำคัญคือtextตัวแปร ที่นี่ฉันสร้างองค์ประกอบ DOM ระดับกลางและต่อท้าย HTML โดยใช้htmlวิธีการจากนั้นดึงเฉพาะข้อความด้วยtextวิธีการ ทั้งสองวิธีมีให้โดยรุ่น Lite เชิงมุมของ jQuery

ส่วนต่อไปนี้คือการใช้newlineตัวกรองซึ่งทำได้โดยใช้$filterบริการ

ตรวจสอบ Plunker ที่นี่: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

การอัปเดตตัวกรองด้วย ng-bind-html ในปัจจุบันจะเป็น:

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

และไม่จำเป็นต้องใช้ตัวกรอง noHTML อีกต่อไป

โซลูชันพื้นที่สีขาวมีการสนับสนุนเบราว์เซอร์ต่ำ: http://caniuse.com/#search=tab-size

ไปปาร์ตี้ช้าไปหน่อย แต่ฉันขอแนะนำให้ปรับปรุงเล็กน้อยเพื่อตรวจสอบสตริงที่ไม่ได้กำหนด / ว่าง

สิ่งที่ต้องการ:

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

หรือ (แน่นกว่าเล็กน้อย)

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