कोई अन्य HTML के साथ angularjs newline फ़िल्टर

Question 1

मैं newline वर्ण ( \n) को html में बदलने की कोशिश कर रहा हूँ br। Google समूह में इस चर्चा के
अनुसार , मुझे यहाँ क्या मिला है:

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...

क्या इसे पूरा करने का कोई रास्ता है?

Question 2

शायद आप इसे केवल html, एक <preformated text>तरह से प्राप्त कर सकते हैं ? यह फिल्टर का उपयोग करने या किसी भी प्रकार की प्रोसेसिंग करने से बचना होगा।

आपको बस उस तत्व के भीतर पाठ प्रदर्शित करना है जिसमें यह CSS है:

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

यह नई लाइनों के रूप में पार्स और प्रदर्शित करेगा। मेरे लिए महान काम करता है।

यहाँ, एक jsFiddle उदाहरण ।

Question 3

नए निर्देशों के साथ खिलवाड़ करने के बजाय, मैंने केवल 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>

Question 4

ऐसा करने का एक सरल तरीका यह है कि एक फ़िल्टर बनाया जाए जो प्रत्येक \nसूची में पाठ को विभाजित करता है , और फिर `एनजी-रिपीट 'का उपयोग करता है।

फ़िल्टर:

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>

Question 5

यदि आप अंतहीन तारों के साथ लेआउट को नष्ट नहीं करना चाहते हैं, तो प्री-लाइन का उपयोग करें:

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

Question 6

मुझे पता नहीं है कि यदि कोणीय में html को स्ट्रिप करने की सेवा है, लेकिन ऐसा लगता है कि आपको अपना newlinesकस्टम फ़िल्टर पास करने से पहले html को हटाने की आवश्यकता है । जिस तरह से मैं करूँगा वह एक कस्टम 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विधि के साथ केवल पाठ को पुनः प्राप्त करता हूं । दोनों तरीके jQuery के Angular के लाइट संस्करण द्वारा प्रदान किए गए हैं ।

निम्नलिखित भाग newlineफ़िल्टर लागू कर रहा है , जो $filterसेवा का उपयोग करके किया जाता है ।

यहाँ प्लंकर की जाँच करें: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

Question 7

वर्तमान में एनजी-बिंद-एचटीएमएल के साथ फिल्टर के लिए एक अपडेट होगा:

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

और noHTML फ़िल्टर की आवश्यकता नहीं है।

व्हाइट-स्पेस सॉल्यूशन में कम ब्राउज़र सपोर्ट है: http://caniuse.com/#search=tab-size

Question 8

इस पर पार्टी के लिए थोड़ी देर हो गई है लेकिन मैं अपरिभाषित / अशक्त तारों की जांच करने के लिए एक छोटे से सुधार का सुझाव दूंगा।

कुछ इस तरह:

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