filtro de nova linha angularjs sem outro html

Estou tentando converter caracteres de nova linha ( \n) em html br.
De acordo com esta discussão no Grupo do Google , aqui está o que tenho:

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

A discussão lá também recomenda usar o seguinte na visualização:

{{ dataFromModel | newline | html }}

Parece htmlque estamos usando o filtro antigo , mas agora devemos usar o ng-bind-htmlatributo.

Independentemente disso, isso representa um problema: não quero que nenhum HTML da string original ( dataFromModel) seja renderizado como HTML; apenas o br's.

Por exemplo, dada a seguinte string:

Enquanto 7> 5
eu ainda não quero html e outras coisas aqui ...

Eu gostaria que ele gerasse:

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

Existe alguma maneira de conseguir isso?

Talvez você consiga fazer isso apenas com html, uma <preformated text>maneira? Isso evitará o uso de filtros ou qualquer tipo de processamento.

Tudo que você precisa fazer é exibir o texto dentro de um elemento que tenha este CSS:

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

Isso analisará e exibirá \ n como novas linhas. Funciona muito bem para mim.

Aqui, um exemplo do jsFiddle .

Em vez de mexer com novas diretivas, decidi usar apenas 2 filtros:

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

Então, na minha opinião, eu canalizo um no outro:

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

Uma maneira mais simples de fazer isso é criar um filtro que divida o texto de cada \num em uma lista e, em seguida, usar `ng-repeat.

O filtro:

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

e no html:

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

Se você não quiser destruir o layout com strings infinitas, use pre-line:

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

Não sei se o Angular tem um serviço para remover html, mas parece que você precisa remover o html antes de passar seu newlinesfiltro personalizado. A maneira como eu faria isso é por meio de uma no-htmldiretiva personalizada , à qual seria passada uma propriedade de escopo e o nome de um filtro a ser aplicado após a remoção dohtml

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

Aqui está a implementação

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

O que importa é a textvariável. Aqui, crio um elemento DOM intermediário e acrescento a ele o HTML usando o htmlmétodo e, em seguida, recupero apenas o texto com o textmétodo. Ambos os métodos são fornecidos pela versão lite do jQuery do Angular .

A parte seguinte é a aplicação do newlinefiltro, que é feito usando o $filterserviço.

Verifique o plunker aqui: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

Uma atualização do filtro com ng-bind-html atualmente seria:

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

e o filtro noHTML não é mais necessário.

solução de espaço em branco está tendo baixo suporte ao navegador: http://caniuse.com/#search=tab-size

Um pouco tarde para a festa sobre isso, mas eu sugeriria uma pequena melhoria para verificar se há strings indefinidas / nulas.

Algo como:

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

Ou (um pouco mais apertado)

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