2015-01-22 12 views
5

Sto cercando di utilizzare più filtri come sotto,Come utilizzare il filtro nl2br e linky insieme in Angularjs?

<p><span ng-bind-html="someVar | nl2br | linky"></span></p> 

che rende nulla. Tuttavia, quando cambio l'ordine dei filtri, come di seguito

<p><span ng-bind-html="someVar | linky | nl2br"></span></p> 

linky funziona, ma nl2br non riesce a convertire le interruzioni di linea a fr.

La seguente implementazione può essere utilizzato per nl2br:

.filter('nl2br', function($sce) { 
    return function(input) { 
    return $sce.trustAsHtml(input.replace(/\n/g, '<br>')); 
    } 
} 
+0

Codice di riferimento per il filtro nl2br http://pastebin.com/1TsdF0V6 –

+1

'$ sce.trustAsHtml' non restituisce una stringa,' linky' si aspetta uno. – zeroflagL

+0

Sto aprendo questa domanda per una taglia in quanto questo è un problema comune, ma inaspettatamente complesso che ti insegna su cose che non volevi sapere in primo luogo. So che è importante gestire l'HTML immesso dall'utente come non affidabile, ma la complessità dell'utilizzo di $ sce con una semplice catena di due filtri mi fa letteralmente impazzire. – jsalonen

risposta

6

così mi è stato in grado di farlo funzionare con someVar | linky | nl2br. Il problema era con il filtro linky. Il filtro linky di ngSanitize cambia \ r e \ n a &#10; e &#13; rispettivamente. Dato il filtro nl2br non riesce a catturare quelli.

Grazie a questa sostanza https://gist.github.com/kensnyder/49136af39457445e5982, modificato come segue nl2br

angular.module('myModule') 
.filter('nl2br', ['$sanitize', function($sanitize) { 
    var tag = (/xhtml/i).test(document.doctype) ? '<br />' : '<br>'; 
    return function(msg) { 
     // ngSanitize's linky filter changes \r and \n to &#10; and &#13; respectively 
     msg = (msg + '').replace(/(\r\n|\n\r|\r|\n|&#10;&#13;|&#13;&#10;|&#10;|&#13;)/g, tag + '$1'); 
     return $sanitize(msg); 
    }; 
}]); 

Lavorare violino http://jsfiddle.net/fxpu89be/4/

Tuttavia, ancora non risolve il problema originale di usarlo in ordine inverso cioè someVar | nl2br | linky

+0

Mi piace il modo in cui chiaramente qual è il problema con la soluzione naive e fornisce un semplice filtro che funziona davvero. Bounty assegnato. Grazie! – jsalonen

1

Basandosi sul commento di zeroflagL - mantenere il pungiglione normale fino alla fine.

<p><span ng-bind-html="someVar | nl2br | linky | trustMe"></span></p> 

Rimozione di ogni fiducia - in modo da restituire una stringa normale:

.filter('nl2br', function($sce) { 
    return function(input) { 
    return input.replace(/\n/g, '<br>'); 
    } 
} 

L'ultima cosa che vogliamo fare è aggiungere un po 'di fiducia:

.filter('trustMe', function($sce) { 
    return function(input) { 
    return $sce.trustAsHtml(input)); 
    } 
} 
+0

Grazie per la risposta. Ci sono due problemi con questo approccio: in primo luogo, come nota minore, hai diversi errori di sintassi. In secondo luogo, non funziona; anche se si esegue l'output tramite '$ sce.trustAsHtml' si ottiene l'HTML di escape. Vedi questo violino per prova: http://jsfiddle.net/jsalonen/fxpu89be/2/ - se procederai ad affrontare questi problemi, sono felice di darti la taglia. – jsalonen

Problemi correlati