javascript - change - filtro de nueva línea angularjs sin otro html

change title angular 4

Question

Estoy tratando de convertir caracteres de nueva línea ( /n ) a html br ''s.
Según esta discusión en el Grupo de Google , esto es lo que tengo:

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

La discusión allí también aconseja utilizar lo siguiente en la vista:

{{ dataFromModel | newline | html }}

Esto parece estar usando el viejo filtro html , mientras que ahora se supone que debemos usar el atributo ng-bind-html .

De todos modos, esto plantea un problema: no quiero que ningún HTML de la cadena original ( dataFromModel ) se represente como HTML; solo el br ''s.

Por ejemplo, dada la siguiente cadena:

Mientras 7> 5
Todavía no quiero html y cosas aquí ...

Me gustaría que salga:

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

¿Hay alguna forma de lograr esto?

Answer 1

En lugar de meterme con las nuevas directivas, decidí usar solo 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;'');
    }
});

Entonces, en mi opinión, canalizo uno en el otro:

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

Answer 2

No sé si Angular tiene un servicio para quitar html, pero parece que necesita eliminar html antes de pasar su filtro personalizado de newlines . La forma en que lo haría es a través de una directiva no-html , a la que se le pasaría una propiedad de ámbito y el nombre de un filtro para aplicar después de eliminar el html

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

Aquí está la implementación

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

El bit importante es la variable de text . Aquí creo un elemento DOM intermedio y lo anexo usando el método html y luego recupero solo el texto con el método de text . Ambos métodos son proporcionados por la versión ligera de Angular de jQuery .

La siguiente parte es aplicar el filtro de newline , que se realiza con el servicio $filter .

Compruebe el plunker aquí: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

Answer 3

Si no desea destruir el diseño con cadenas infinitas, use prelínea:

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

Answer 4

Tal vez puedas lograr esto solo con html, un <preformated text> ? Evitará el uso de filtros o cualquier tipo de procesamiento.

Todo lo que tienes que hacer es mostrar el texto dentro de un elemento que tiene este CSS:

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

Esto analizará y mostrará / n como nuevas líneas. Funciona muy bien para mi

Aquí, un ejemplo jsFiddle .

Answer 5

Un poco tarde para la fiesta sobre esto, pero sugeriría una pequeña mejora para comprobar cadenas indefinidas / nulas.

Algo como:

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

O (un poco más apretado)

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

Answer 6

Una actualización del filtro con ng-bind-html actualmente sería:

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

y el filtro noHTML ya no es necesario.

la solución de espacio en blanco tiene poca compatibilidad con el navegador: http://caniuse.com/#search=tab-size

Answer 7

Una forma más simple de hacer esto es hacer un filtro que divida el texto en cada /n en una lista, y luego usar `ng-repeat.

El filtro:

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

y en el html:

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