AngularJS:段落元素的换行符

Question

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

我可以想到几种方法来做到这一点.但是我想知道是否存在"官方"角度方式或者是AngularJS上下文中最优雅的方法.

一个例子

从:

Lorem ipsum dolor坐在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/