角与链接

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