他の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;
    };
})