角度がリンク

Question

私のAPIを使用して、安全でないテキストの一部を交換すると、次のプロパティでのイベント（JSON）の配列を返します。

event.text 

をtextプロパティには、私が欲しい、たとえばのcompanyNameため、ユーザの入力に基づいて文字列が含まれています会社へのクリック可能なリンクを持つng-repeatループ内のテキストを一覧表示します。 （event.textは、「Daveが新しい会社Philipsを追加しました」フィリップスとDaveがデータベースの値である場合）

企業名は安全でないhtmlタグを持つことがあります。

<a href="somenastyurl">dangerouscompany</a> 

角が文字列を消毒します。

しかし、いくつかのリンクはフロントエンドに表示され、（my apiによって作成された）保存リンクのみが表示されるようにする必要があります。私は、APIの2つの戻り値を追加することにしました：

event.links 
event.linknames 

event.linksは、リンク（項目へのURL、URLは常に彼らはidを使用して、ユーザー入力に基づいて、安全ではない）を含み、名前をevent.linknamesリンクに表示する必要があります。例えば：[0]のリンクと交換するよう

event.links = ["http://example.com/1","http://example.com/2"] 
event.linknames = ["Dave","Philips"] 

アイブ氏は、タグを含むようにevent.textを編集し、タグは[0] event.linksへのリンクに置き換えてください[0]の名前でevent.linksnames [0]。 タグを置き換えるには、次のコードを作成してください（イベントがロードされた後に私のコントローラで）。私の見解で

angular.forEach($scope.events, function (value, key) { 

    var arrayLength = value.links.length; 
    for (var i = 0; i < arrayLength; i++) { 
     value.Text = value.Text.replace("[" + i + "]", '<a ng-href"' + value.links[i] + '">' + value.linkNames[i]+'</a>'); 
    } 
}); 

：

<div ng-repeat="e in events"> 
     <span >{{e.Text}} </span><br /> 
</div 

タグ[0]、[1]に置換されているが、テキストはまだ消毒され、ビューのHTMLタグが表示されます。

<a ng-href"http://example.com/1">Dave</a> added a new company <a ng-href"http://example.com/2">Philips</a> 

代わりに、所望の結果の

：

Dave added a new company Philips 

ここで、daveとphilipsはクリック可能なリンクです。

注：ユーザーは自分の会社[私]の会社に名前を付けることができますが、リンクはまだ安全です。私は角度を使用して1.6.4

置き換えられた部品をクリック可能にし、置き換えられていない部品を消毒するにはどうしたらいいですか？

Answer 1

あなたはバインディングシンプル、安全でないHTMLのための独自のディレクティブを追加することができます。

var app = angular.module("app", []); 
 
app.controller("ctrl", function($scope) { 
 
    $scope.events = [{ 
 
    Text: '<a href="http://example.com/1">Dave</a> added a new company <a href="http://example.com/2">Philips</a>' 
 
    }]; 
 
}) 
 
app.directive("convertHtml", function() { 
 
    return function(scope, element, attr) { 
 
    scope.$watch(attr.convertHtml, function(value) { 
 
     element.html(scope.$eval(attr.convertHtml)); 
 
    }) 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div ng-repeat="e in events"> 
 
    <span convert-html="e.Text"></span><br /> 
 
    </div> 
 
</div>

Answer 2

ng-sanitizeを使用する - Linkyテキスト入力のリンクを検索し、それらをHTMLリンクに変換します。 http/https/ftp/mailtoと一般的な電子メールアドレスのリンクをサポートします。

https://docs.angularjs.org/api/ngSanitize/filter/linky