Angularjs newline filter без каких-либо других html

Я пытаюсь преобразовать символы новой строки (\n) в html br.
По этой дискуссии в группе Google, вот что у меня есть:

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

Обсуждение там также советует использовать в представлении следующее:

{{ dataFromModel | newline | html }}

Кажется, что используется старый фильтр html, тогда как теперь мы должны использовать атрибут ng-bind-html.

Несмотря на это, это создает проблему: я не хочу, чтобы HTML из исходной строки (dataFromModel) отображался как HTML; только br.

Например, с учетом следующей строки:

Пока 7 > 5
Я все еще не хочу html и прочее здесь...

Я хочу, чтобы он выводил:

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

Есть ли способ сделать это?

Ответы

Ответ 1

Вместо того, чтобы возиться с новыми директивами, я решил использовать только два фильтра:

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>

Ответ 2

Может быть, вы можете достичь этого только с помощью html, a <preformated text>? Это позволит избежать использования фильтров или обработки любого вида.

Все, что вам нужно сделать, это отобразить текст внутри элемента, который имеет этот CSS:

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

Это будет анализировать и отображать \n как новые строки. Отлично работает для меня.

Здесь пример jsFiddle.

Ответ 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>

Ответ 4

Я не знаю, есть ли у Angular служба для разделения html, но, кажется, вам нужно удалить html перед тем, как передать свой настраиваемый фильтр newlines. То, как я это сделаю, - это создать настраиваемую директиву no-html, которой будет передано свойство scope и имя фильтра, который будет применяться после удаления 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

Ответ 5

Обновление фильтра с помощью ng-bind-html в настоящее время будет:

myApp.filter('newlines', function () {
  return function(text) {
    return text.replace(/(&#13;)?&#10;/g, '<br/>');
  }
});

и фильтр noHTML больше не требуется.

белое пространство имеет низкую поддержку браузера: http://caniuse.com/#search=tab-size