javascript - AngularJS：段落元素的换行符

Question

在 Angular 中，我需要从包含换行符的文本块中生成一系列段落元素吗？

我可以想到几种方法来做到这一点。但是我想知道是否有“官方”的 Angular 方式，或者在 AngularJS 上下文中最优雅的方法是什么。

一个例子

从：

Lorem ipsum dolor sit amet，consectetuer adipiscing elit。\n
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore。\n
Magna aliquam erat volutpat。Ut wisi enim ad minim veniam。

至：

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>

我可以想到多种方法来做到这一点：

1. 修改控制器中的文本（虽然我更喜欢避免修改我的模型）
2. 使用指令，并在链接函数中生成段落（似乎过于繁琐）。
3. 使用过滤器（我目前最喜欢的）创建一个数组以通过管道传输到 ng-repeat

Answer 1

我能想到的最佳解决方案是创建一个过滤器：

angular.module('myApp').
filter('nlToArray', function() {
  return function(text) {
      return text.split('\n');
  };
});

这需要一个文本块并为每个段落创建一个新的数组元素。

然后可以将该数组插入到 ng-repeat 指令中：

<p ng-repeat="paragraph in textBlock|nlToArray track by $index">{{paragraph}}</p>

Answer 2

var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function($scope){
    $scope.myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nSed diam nonummy nibh euismod tincidunt ut laoreet dolore.\nMagna aliquam erat volutpat. Ut wisi enim ad minim veniam."
});
myApp.filter('nl2p', function () {
    return function(text){
        text = String(text).trim();
        return (text.length > 0 ? '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>' : null);
    }
});

http://jsfiddle.net/moderndegree/934aZ/

Answer 3

您可以使用css属性解决此问题并将 {{text}} 用于p html 元素

 white-space: pre-line;

Answer 4

这是一个愚蠢的技巧，但它适用于围绕其他标签的段落，例如<p><h3>：

text = '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>';
// delete blank lines
text = text.replace(/<p>\s*?<\p>/g, '');
// delete erroneous paragraph enclosed tags
text = text.replace(/<p>\s*?(<.+?>)\s*?(.+?)\s*?(<\/.+?>)\s*?<\/p>/g, '$1$2$3');