다른 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 &gt; 5<br>I still don't want html &amp; 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, '&amp;')
                .replace(/>/g, '&gt;')
                .replace(/</g, '&lt;');
    }
});

그런 다음 내 견해로는 하나를 다른 것으로 파이프합니다.

<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(/(&#13;)?&#10;/g, '<br/>');
  }
});

noHTML 필터는 더 이상 필요하지 않습니다.

공백 솔루션의 브라우저 지원이 낮음 : http://caniuse.com/#search=tab-size

이것에 대해 파티에 조금 늦었지만 정의되지 않은 / null 문자열을 확인하기 위해 약간의 개선을 제안합니다.

다음과 같은 것 :

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

또는 (좀 더 타이트하게)

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