[javascript] 다른 html이없는 angularjs 개행 필터
줄 바꿈 문자 ( \n)를 html 로 변환하려고합니다 br. Google 그룹의이 토론에
따라 다음과 같은 내용 이 있습니다.
myApp.filter('newlines', function () {
return function(text) {
return text.replace(/\n/g, '<br/>');
}
});
이 토론에서는보기에서 다음을 사용하는 것이 좋습니다.
{{ dataFromModel | newline | html }}
이것은 이전 html필터를 사용하는 것처럼 보이지만 이제는 ng-bind-html속성 을 사용해야 합니다.
그럼에도 불구하고 이것은 문제를 제기합니다. 원본 문자열 ( dataFromModel)의 HTML이 HTML로 렌더링되는 것을 원하지 않습니다 . 만 br.
예를 들어 다음 문자열이 주어집니다.
7> 5
나는 여전히 여기에 html 및 물건을 원하지 않습니다 …
출력하고 싶습니다.
While 7 > 5<br>I still don't want html & stuff in here...
이를 수행하는 방법이 있습니까?
답변
어쩌면 html로만 이것을 달성 할 수 <preformated text>있습니까? 필터 사용을 피하거나 모든 종류의 처리를 수행합니다.
이 CSS가있는 요소 내에 텍스트를 표시하기 만하면됩니다.
<p style="white-space: pre;">{{ MyMultiLineText}}</p>
이것은 구문 분석하고 \ n을 새 줄로 표시합니다. 나를 위해 잘 작동합니다.
여기에 jsFiddle 예제가 있습니다.
답변
새로운 지시문을 엉망으로 만드는 대신 2 개의 필터를 사용하기로 결정했습니다.
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, '<');
}
});
그런 다음 내 견해로는 하나를 다른 것으로 파이프합니다.
<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>
답변
이 작업을 수행하는 더 간단한 방법은 텍스트를 각각 \n목록으로 분할하는 필터를 만든 다음`ng-repeat를 사용하는 것입니다.
필터 :
App.filter('newlines', function() {
return function(text) {
return text.split(/\n/g);
};
});
그리고 html에서 :
<span ng-repeat="line in (text | newlines) track by $index">
<p> {{line}}</p>
<br>
</span>
답변
무한 문자열로 레이아웃을 파괴하지 않으려면 pre-line을 사용하십시오.
<p style="white-space: pre-line;">{{ MyMultiLineText}}</p>
답변
Angular에 html을 제거하는 서비스가 있는지 모르겠지만 newlines사용자 지정 필터 를 전달하기 전에 html을 제거해야하는 것 같습니다 . 내가하는 방법은 사용자 지정 no-html지시문을 사용하는 것입니다.이 지시문은 범위 속성과 필터 이름을 제거한 후 적용 할 필터 이름을 전달합니다.html
<div no-html="data" post-filter="newlines"></div>
구현은 다음과 같습니다.
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);
};
});
중요한 부분은 text변수입니다. 여기서는 중간 DOM 요소를 만들고 html메서드를 사용하여 HTML에 추가 한 다음 메서드로 텍스트 만 검색합니다 text. 두 방법 모두 Angular의 라이트 버전 jQuery에서 제공 합니다.
다음 newline은 $filter서비스를 이용하여 수행되는 필터를 적용하는 부분입니다 .
여기에서 플 런커를 확인하십시오 : http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview
답변
현재 ng-bind-html을 사용하는 필터에 대한 업데이트는 다음과 같습니다.
myApp.filter('newlines', function () {
return function(text) {
return text.replace(/( )? /g, '<br/>');
}
});
noHTML 필터는 더 이상 필요하지 않습니다.
공백 솔루션의 브라우저 지원이 낮음 :
http://caniuse.com/#search=tab-size
답변
이것에 대해 파티에 조금 늦었지만 정의되지 않은 / null 문자열을 확인하기 위해 약간의 개선을 제안합니다.
다음과 같은 것 :
.filter('newlines', function () {
return function(text) {
return (text) ? text.replace(/( )? /g, '<br/>') : text;
};
})
또는 (좀 더 타이트하게)
.filter('newlines', function () {
return function(text) {
return (text instanceof String || typeof text === "string") ? text.replace(/( )? /g, '<br/>') : text;
};
})
