角與鏈接

Question

取代不安全的文本的一部分

我的API返回具有以下屬性的事件（JSON）的數組：

event.text 

文本屬性包含基於用戶輸入一個字符串，如公司名稱，我想通過可點擊的公司鏈接在ng-repeat循環中列出文本。 （event.text可以是「Dave添加了一家新公司Philips」，其中Philips和Dave是來自數據庫的值）

因爲公司名可以具有不安全的html標籤，

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

角度消毒字符串。

但是有些鏈接應該顯示在前端，以確保只顯示保存鏈接（由我的api創建）。我決定在API添加兩個返回值：

event.links 
event.linknames 

event.links包含鏈接（URL到一個項目，該網址是總是安全的，而不是基於他們所使用的ID的用戶輸入）和event.linknames名稱應該顯示在鏈接中。例如：

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

伊夫編輯event.text含有如[0]，與鏈接被替換標籤，標籤[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是可點擊的鏈接。

注：我知道用戶可以將他的公司命名爲我的[0]公司，但鏈接仍然安全。 Im使用角度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