фильтр новой строки angularjs без другого 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's.

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

Хотя 7> 5,
я все еще не хочу, чтобы здесь были html и прочее ...

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

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

Есть ли способ добиться этого?

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

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

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

Это проанализирует и отобразит \ n как новые строки. У меня отлично работает.

Вот пример jsFiddle .

Вместо того, чтобы возиться с новыми директивами, я решил использовать 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>

Более простой способ сделать это - создать фильтр, который разбивает текст в каждом \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>

Если вы не хотите разрушать макет бесконечными строками, используйте pre-line:

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

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

В следующей части применяется newlineфильтр, который выполняется с помощью $filterслужбы.

Проверьте плункер здесь: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

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

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

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

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

Немного поздно для вечеринки по этому поводу, но я бы предложил небольшое улучшение для проверки строк undefined / null.

Что-то типа:

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

Или (немного плотнее)

.filter('newlines', function () {
    return function(text) {
        return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})