AngularJS過濾器將html作爲字符串返回

Question

我創建了一個AngularJS過濾器，用於根據數據中找到的地址自動創建可點擊的鏈接。過濾：

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

這裏是我怎樣，我稱它（裏面一個段落）：

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

這正常工作，以取代中的鏈接代碼的純文本鏈接。但是，它將其替換爲純文本的鏈接。例如，www.google.com將被替換爲。這顯然不會產生可點擊的鏈接，這是我的目標。

我不知道爲什麼會發生這種情況。任何想法如何防止/修復它？謝謝。

Answer 1

嘗試使用ngBindHtmlUnsafe指令有你的過濾器生產應用爲元素的實際的innerHTML內容的HTML，像這樣：

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

Answer 2

您需要使用兩種：

• ngBindHtmlUnsafe
  如果您100％信任的內容源
• ngBindHtml
  如果你不信任的內容

使用表達式會逃跑，你傳遞給它（符號如<> &）

Answer 3

我就是用這個的任何HTML實體輸出字符串的源過濾了一段時間，但不知道它產生的災難性結果。我在這裏修改版本：

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

請注意，它沒有使用angular.forEach！ （?????）當輸出結果時，輸出就會變成彈道。據推測，這個問題與多場比賽有關！