javascript - change - filtro de nueva línea angularjs sin otro html
change title angular 4 (7)
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, ''&'')
.replace(/>/g, ''>'')
.replace(/</g, ''<'');
}
});
Entonces, en mi opinión, canalizo uno en el otro:
<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>
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 > 5<br>I still don''t want html & stuff in here...
¿Hay alguna forma de lograr esto?
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
Si no desea destruir el diseño con cadenas infinitas, use prelínea:
<p style="white-space: pre-line;">{{ MyMultiLineText}}</p>
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 .
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(/( )? /g, ''<br/>'') : text;
};
})
O (un poco más apretado)
.filter(''newlines'', function () {
return function(text) {
return (text instanceof String || typeof text === "string") ? text.replace(/( )? /g, ''<br/>'') : text;
};
})
Una actualización del filtro con ng-bind-html actualmente sería:
myApp.filter(''newlines'', function () {
return function(text) {
return text.replace(/( )? /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
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>