2015-01-22 3 views
5

Я пытаюсь использовать несколько фильтров, как показано ниже,Как использовать фильтры nl2br и linky вместе в Angularjs?

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

, который не делает ничего. Однако, когда я изменить порядок фильтров, как показано ниже

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

Linky работает, но nl2br не удается преобразовать разрывы строк в бр.

Следующая реализация может быть использован для nl2br:

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

Код ссылки для фильтра nl2br http://pastebin.com/1TsdF0V6 –

+1

'$ sce.trustAsHtml' не возвращает строку,' linky' ожидает ее. – zeroflagL

+0

Я открываю этот вопрос за щедрость, потому что это общая, но неожиданно сложная проблема, которая учит вас тем вещам, о которых вы не хотели знать в первую очередь. Я знаю, что его важно обрабатывать введенный пользователем HTML как ненадежный, но сложность использования $ sce с простой цепочкой из двух фильтров просто дует мне в голову. – jsalonen

ответ

6

Так что я был в состоянии получите его с someVar | linky | nl2br. Проблема была связана с фильтром ссылок. Связующий фильтр ngSanitize меняет \ r и \ n на &#10; и &#13; соответственно. Данный фильтр nl2br не может их поймать.

Благодаря этому сути https://gist.github.com/kensnyder/49136af39457445e5982, модифицированной 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); 
    }; 
}]); 

Работа скрипка http://jsfiddle.net/fxpu89be/4/

Однако он по-прежнему не решает исходную задачу использования его в обратном порядке т.е. someVar | nl2br | linky

+0

Мне нравится, как вы четко понимаете, в чем проблема с наивным решением, а также обеспечивают простой фильтр, который действительно работает. Награда за награду. Спасибо! – jsalonen

1

Опираясь на комментарии zeroflagL в - держать его нормальное жало до конца.

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

Удаление всех доверие - так что мы возвращаем нормальную строку:

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

Последнее, что мы хотим сделать, это добавить некоторое доверие:

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

Благодарим вас за ответ. Есть две проблемы с этим подходом: во-первых, в качестве незначительной заметки у вас есть несколько синтаксических ошибок. Во-вторых, это не работает; даже если вы запустите вывод через '$ sce.trustAsHtml', вы получите экранированный HTML. См. Эту скрипту для доказательства: http://jsfiddle.net/jsalonen/fxpu89be/2/ - если вы приступите к решению этих проблем, я рад дать вам щедрость. – jsalonen

Смежные вопросы