blocks|key|203753|text|我不知道Angular是否提供了剥离html的服务，但在传递newlines自定义过滤器之前，您似乎需要删除html。我的方法是通过一个定制的no-html指令，它将被传递一个作用域属性和在删除html之后要应用的过滤器的名称|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|203754|<div+no-html="data"+post-filter="newlines"></div>|code-block|syntax|javascript|203755|下面是实现|203756|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);
++};
});|203757|重要的一点是text变量。在这里，我创建了一个中间的DOM元素，并使用html方法将其附加到HTML中，然后使用text方法仅检索文本。这两种方法都由Angular's+lite+version+of+jQuery提供。|203758|接下来的部分是使用$filter服务来应用newline过滤器。|203759|在这里检查柱塞：http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview|203760|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/angular.element|1|http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview^0|U|8|1Z|7|2P|4|0|0|0|0|6|4|Z|4|1K|4|23|W|0|0|9|7|L|7|0|8|1F|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|Q|3|R|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|U|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

I'm not aware if Angular has a service to strip html, but it seems you need to remove html before passing your <code>newlines</code> custom filter. The way I would do it is through a custom <code>no-html</code> directive, which would be passed a scope property and the name of a filter to apply after removing the <code>html</code> 

<pre><code>&lt;div no-html="data" post-filter="newlines"&gt;&lt;/div&gt;
</code></pre>

Here's the implementation

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

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

 // apending html
 element.html(result);
 };
});
</code></pre>

The important bit is the <code>text</code> variable. Here I create an intermediate DOM element and append it the HTML using the <code>html</code> method and then retrieve only the text with the <code>text</code> method. Both methods are provided by <a href="http://docs.angularjs.org/api/angular.element" rel="noreferrer">Angular's lite version of jQuery</a>.

The following part is applying the <code>newline</code> filter, which is done using the <code>$filter</code> service.

Check the plunker here: <a href="http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview" rel="noreferrer">http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview</a>

blocks|key|2837354|text|我决定只使用2个过滤器，而不是混乱的新指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2837355|App.filter('newlines',+function+()+{
++++return+function(text)+{
++++++++return+text.replace(/\n/g,+' ');
++++}
})
.filter('noHTML',+function+()+{
++++return+function(text)+{
++++++++return+text
++++++++++++++++.replace(/&/g,+'&amp;')
++++++++++++++++.replace(/>/g,+'&gt;')
++++++++++++++++.replace(/</g,+'&lt;');
++++}
});|code-block|syntax|javascript|2837356|然后，在我看来，我将一个连接到另一个：|2837357|<span+ng-bind-html-unsafe="dataFromModel+%7C+noHTML+%7C+newlines">|2837358|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Instead of messing with new directives, I decided to just use 2 filters:

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

Then, in my view, I pipe one into the other:

<pre><code>&lt;span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"&gt;&lt;/span&gt;
</code></pre>

blocks|key|2837385|text|也许你只能通过html，一种<preformated+text>的方式来实现这一点？它将避免使用过滤器或进行任何类型的处理。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2837386|您所要做的就是显示具有以下CSS的元素中的文本：|2837387|<p+style="white-space:+pre;">{{+MyMultiLineText}}|code-block|syntax|javascript|2837388|这将解析并显示\n为新行。对我来说很有用。|2837389|这里，一个jsFiddle+example。|2837390|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/2uSKb/^0|E|I|0|0|0|0|5|G|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

Maybe you can achieve this only with html, a <code>&lt;preformated text&gt;</code> way ? It will avoid from using filters or do any kind of processing.

All you have to do is display the text within an element that has this CSS:

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

This will parse and display \n as new lines. Works great for me.

Here, a <a href="http://jsfiddle.net/2uSKb/">jsFiddle example</a>.

blocks|key|2837400|text|一种更简单的方法是制作一个过滤器，将每个重复处的文本分割成一个列表，然后使用``ng+\n。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2837401|过滤器：|2837402|App.filter('newlines',+function()+{
++return+function(text)+{
++++return+text.split(/\n/g);
++};
});|code-block|syntax|javascript|2837403|在html中：|2837404|<span+ng-repeat="line+in+(text+%7C+newlines)+track+by+$index">
+++++{{line}}
++++ 
|2837405|entityMap^0|17|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

A simpler way to do this is to make a filter that splits the text at each <code>\n</code> into a list, and then to use `ng-repeat.

The filter:

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

and in the html:

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

blocks|key|3050300|text|当前使用ng-bind-html对筛选器的更新为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3050301|myApp.filter('newlines',+function+()+{
++return+function(text)+{
++++return+text.replace(/(&#13;)?&#10;/g,+' ');
++}
});|code-block|syntax|javascript|3050302|并且不再需要noHTML过滤器。|3050303|空白解决方案对浏览器的支持较低：http://caniuse.com/#search=tab-size|offset|length|3050304|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#search=tab-size^0|0|0|0|G|Z|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

An update to the filter with ng-bind-html currently would be:

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

and the noHTML filter is no longer required.

white-space solution is having low browser support: 
<a href="http://caniuse.com/#search=tab-size" rel="nofollow">http://caniuse.com/#search=tab-size</a>

blocks|key|2837453|text|在这方面有点晚了，但我建议对检查未定义/空字符串进行一些小的改进。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2837454|类似于：|2837455|.filter('newlines',+function+()+{
++++return+function(text)+{
++++++++return+(text)+?+text.replace(/(&#13;)?&#10;/g,+' ')+:+text;
++++};
})|code-block|syntax|javascript|2837456|或者(更紧一点)|2837457|.filter('newlines',+function+()+{
++++return+function(text)+{
++++++++return+(text+instanceof+String+%7C%7C+typeof+text+===+"string")+?+text.replace(/(&#13;)?&#10;/g,+' ')+:+text;
++++};
})|2837458|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Bit late to the party on this but I would suggest a small improvement to check for undefined / null strings.

Something like:

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

Or (bit tighter)

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

blocks|key|203815|text|如果不想用无休止的字符串破坏布局，请使用pre-line：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203816|<p+style="white-space:+pre-line;">{{+MyMultiLineText}}|code-block|syntax|javascript|203817|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you do not want to destroy the layout with endless strings, use pre-line:

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

I'm trying to convert newline characters (<code>\n</code>) to html <code>br</code>'s. 
As per <a href="https://groups.google.com/forum/?fromgroups=#!topic/angular/kRk9_udDZFc">this discussion in the Google Group</a>, here's what I've got:

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

The discussion there also advises to use the following in the view:

<pre><code>{{ dataFromModel | newline | html }}
</code></pre>

This seems to be using the old <code>html</code> filter, whereas now we're supposed to use the <code>ng-bind-html</code> attribute.

<hr>

Regardless, this poses a problem: I don't want any HTML from the original string (<code>dataFromModel</code>) to be rendered as HTML; only the <code>br</code>'s.

For example, given the following string:

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

I'd want it to output:

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

Is there any way to accomplish this?

angularjs newline filter with no other html

我正在尝试将换行符(\n)转换为html br。根据的说法，以下是我得到的信息：myApp.filter('newlines', function () { return function(text) { return text.replace(/\n/g, ' '); }});这里的...

问没有其他html的angularjs换行符过滤器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问没有其他html的angularjs换行符过滤器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问没有其他html的angularjs换行符过滤器
EN