AngularJS erstellen html/Link/Anker aus Text (Escape/unescape html in der Ansicht)

Question

Ich habe einen Controller, der einen zugewiesenen Wert hat:

$scope.post = 'please visit http://stackoverflow.com quickly'; 

Ich habe einen Text in meinem html:

<p>{{post}}</p> 

Ich möchte einen anklickbaren Link der URL machen (umgeben Sie es mit Anker-Tags).

Ich versuchte, meine html zu ändern:

<p ng-bind-html="post | createAnchors"></p> 

hier ein des Problems vereinfachtes Beispiel ist:

http://jsfiddle.net/T3fFt/4/

Die Frage ist, wie ich den ganzen Beitrag Text entweichen kann, außer für den Link, der von Anker-Tags umgeben sein wird? ?

Answer 1

Ich glaube, Sie linky Filter Angular die können für dies: https://docs.angularjs.org/api/ngSanitize/filter/linky

Sie können es so verwenden:

<p ng-bind-html="post | linky"></p> 

Sie werden Angular des sanitize Modul enthalten müssen für linky zu arbeiten:

angular.module('myApp', [ 
    'ngRoute', 
    'ngSanitize', 
    'myApp.filters', 
    ... 

Answer 2

Sie können dies für die Zeichenfolge ersetzen verwenden:

'please visit http://stackoverflow.com quickly'.replace(/(http[^\s]+)/, '<a href="$1">$1</a>') 

dann müssen Sie den $sce Service und ngBindHtml Richtlinie verwenden.

$sce ist ein Dienst, der strenge Kontext-bezogene Escaping Dienste AngularJS bietet.

Also in Ihrem Filter benötigen Sie Links mit a Tags wickeln dann eine vertrauenswürdige html zurückkehren $sce.trustAsHtml mit:

filter('createAnchors', function ($sce) { 
    return function (str) { 
     return $sce.trustAsHtml(str. 
           replace(/</g, '&lt;'). 
           replace(/>/g, '&gt;'). 
           replace(/(http[^\s]+)/g, '<a href="$1">$1</a>') 
           ); 
    } 
}) 

Arbeitsbeispiele: http://jsfiddle.net/T3fFt/11/