AngularJS：段落元素的换行符

Question

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

我可以想到几种方法来做到这一点。但是我想知道是否存在“官方”Angular方式或者AngularJS背景下最优雅的方法。

示例

自：

  

Lorem ipsum dolor坐下来，这是一种不可或缺的精神。 \ 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

这是一个愚蠢的黑客，但它适用于围绕其他标签的段落，例如<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');

Answer 4

您可以使用 css 属性解决此问题，并在{strong> p html元素

中使用{{text}}

 white-space: pre-line;