Filtro AngularJS che restituisce html come stringa

Question

Ho creato un filtro AngularJS per creare automaticamente collegamenti selezionabili dagli indirizzi trovati nei dati. Il filtro:

app.filter('parseUrl', function() { 
    var //URLs starting with http://, https://, or ftp:// 
     replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, 
     //URLs starting with "www." (without // before it, or it'd re-link the ones done above). 
     replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim, 
     //Change email addresses to mailto:: links. 
     replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim; 

     return function(text, target, otherProp) {   
      angular.forEach(text.match(replacePattern1), function(url) { 
       text = text.replace(replacePattern1, "<a href=\"$1\" target=\"_blank\">$1</a>"); 
      }); 
      angular.forEach(text.match(replacePattern2), function(url) { 
       text = text.replace(replacePattern2, "$1<a href=\"http://$2\" target=\"_blank\">$2</a>"); 
      }); 
      angular.forEach(text.match(replacePattern3), function(url) { 
       text = text.replace(replacePattern3, "<a href=\"mailto:$1\">$1</a>"); 
      }); 

      return text;   
     }; 
    }); 

Ed ecco come sto chiamando (all'interno di un paragrafo):

<p><strong>Details:</strong> {{event.description | parseUrl}}</p> 

E questo funziona correttamente per sostituire i collegamenti di testo con il codice per un collegamento. Tuttavia, lo sostituisce con il link letteralmente come testo normale. Ad esempio, www.google.com verrà sostituito con . Questo chiaramente non rende un link cliccabile, che era il mio obiettivo.

Non sono sicuro del motivo. Qualche idea su come prevenirlo/risolverlo? Grazie.

Answer 1

provare ad utilizzare la direttiva ngBindHtmlUnsafe di avere il codice HTML che il filtro produce applicato come effettivi contenuti innerHTML di un elemento, in questo modo:

<span ng-bind-html-unsafe="event.description | parseUrl"></span> 

Answer 2

è necessario utilizzare uno:

• ngBindHtmlUnsafe
  Se ti fidi al 100% dell'origine del contenuto
• ngBindHtml
  Se non si considera attendibile l'origine del contenuto

Output una stringa utilizzando un'espressione sfuggirà qualsiasi entità HTML che si passa a esso (simboli come <> &)

Answer 3

stavo usando questo filtro per un po ', in qualche modo senza notare i risultati disastrosi che ha prodotto. La mia versione modificata qui:

filter('parseUrl', function($sce) { 
var //URLs starting with http://, https://, or ftp:// 
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, 
    //URLs starting with "www." (without // before it, or it'd re-link the ones done above). 
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim, 
    //Change email addresses to mailto:: links. 
    replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim; 

    return function(text, target, otherProp) {   
     text = (text + '').replace(/>/,"&gt;").replace(/</,"&lt;"); 
     text = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2'); 
     text = text.replace(replacePattern1, "<a href=\"$1\" target=\"_blank\">$1</a>"); 
     text = text.replace(replacePattern2, "<a href=\"http://$2\" target=\"_blank\">$2</a>"); 
     text = text.replace(replacePattern3, "<a href=\"mailto:$1\">$1</a>"); 
     return $sce.trustAsHtml(text); 
    }; 
}); 

Si noti che non sta utilizzando angular.for Any! (?????) L'output sarebbe balistico quando lo ha fatto. Presumibilmente questo problema ha a che fare con più corrispondenze!