angularjs换行过滤器没有其他html

Question

我正在尝试将换行符(\n)转换为html br.
根据谷歌集团的讨论,这是我得到的:

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

那里的讨论还建议在视图中使用以下内容:

{{ dataFromModel | newline | html }}

这似乎是使用旧的html过滤器,而现在我们应该使用该ng-bind-html属性.

---

无论如何,这会产生一个问题:我不希望原始字符串(dataFromModel)中的任何HTML 呈现为HTML; 只有br的.

例如,给定以下字符串:

虽然7> 5
我仍然不想在这里使用html和东西......

我希望它输出:

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

有没有办法实现这个目标？

Answer 1

也许你只能用html实现这一点,一种<preformated text>方式？它将避免使用过滤器或进行任何处理.

您所要做的就是在具有此CSS的元素中显示文本:

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

这将解析并显示\n作为新行.对我来说很棒.

这里是一个jsFiddle示例.

Answer 2

我决定只使用2个过滤器,而不是搞乱新的指令:

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

然后,在我看来,我将一个管道输入另一个:

<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>

Answer 3

一种更简单的方法是制作一个过滤器,将每个文本\n分成一个列表,然后使用`ng-repeat.

过滤器:

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

并在HTML中:

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

Answer 4

如果您不想使用无限字符串销毁布局,请使用pre-line:

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

Answer 5

我不知道Angular是否有剥离html的服务,但似乎你需要在传递newlines自定义过滤器之前删除html .我这样做的方法是通过一个自定义no-html指令,它将传递一个范围属性和一个过滤器的名称,以便在删除后应用html

<div no-html="data" post-filter="newlines"></div>

这是实施

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);
  };
});

重要的是text变量.在这里,我创建一个中间DOM元素,并使用该html方法将其附加到HTML ,然后仅使用该方法检索文本text.这两种方法都是由Angular的简洁版jQuery提供的.

以下部分是应用newline过滤器,使用该$filter服务完成.

在这里查看plunker:http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T？p = preview