如何在 AngularJS 部分中保留新行？答案

【问题标题】：How can I preserve new lines in an AngularJS partial?如何在 AngularJS 部分中保留新行？
【发布时间】：2013-03-16 12:35:49
【问题描述】：

在 AngularJS 部分中，我正在遍历条目列表，如下所示：

<ul class="entries">
    <li ng-repeat="entry in entries">
        <strong>{{ entry.title }}</strong>
        <p>{{ entry.content }}</p>
    </li>
</ul>

{{entry.content}} 的内容有一些被 AngularJS 忽略的换行符。我怎样才能让它保留换行符？

【问题讨论】：

标签： angularjs

【解决方案1】：

这只是基本的 HTML。 AngularJS 不会对此做出任何改变。您可以改用pre 标签：

<pre>{{ entry.content }}</pre>

或者使用 CSS：

p .content {white-space: pre}

...

<p class='content'>{{ entry.content }}</p>

如果entry.content包含HTML代码，你可以使用ng-bind-html：

<p ng-bind-html="entry.content"></p>

不要忘记包含ngSanitize：

var myModule = angular.module('myModule', ['ngSanitize']);

【讨论】：

是的，目前我确实在使用<pre> 标签，但我认为有一个易于使用的过滤器可用于角度，现在我怀疑。类似{{entry.content | pre}} 或{{entry.content | html}}
@Amyth Angular 只会将其视为文本，就像浏览器一样。除此之外的任何事情都取决于您
对于 CSS white-space 参数，使用 pre-wrap 而不是 pre。否则长句不会自动换行。
不要忘记将 ngSanitize 安装到您的模块中！ docs.angularjs.org/api/ngSanitize/service/$sanitize

【解决方案2】：

我做过滤器

// filters js
myApp.filter("nl2br", function($filter) {
 return function(data) {
   if (!data) return data;
   return data.replace(/\n\r?/g, '<br />');
 };
});

然后

// view
<div ng-bind-html="article.description | nl2br"></div>

【讨论】：

太棒了 - 如此简单却太棒了！
\r?\n 可能更合适。否则你会为 Windows 系统留下一个悲伤的 \r 。

【解决方案3】：

我通过添加pre-line来修复它：

<style>
    pre{
        white-space: pre-line;
    }
</style>
My data:
 <pre>{{feedback.Content}}<pre>

【讨论】：

【解决方案4】：

// AngularJS filter
angular.module('app').filter('newline', function($sce) {
    return function(text) {
        text = text.replace(/\n/g, '<br />');
        return $sce.trustAsHtml(text);
    }
});

// HTML
<span ng-bind-html="someText | newline"></span>

【讨论】：