Question

我的api返回一个事件数组（json），其中包含以下属性：

event.text

text属性包含一个基于用户输入的字符串，例如companyName，我想在ng-repeat循环中列出文本，并带有指向公司的可点击链接。（event.text可能是＆＃34; Dave添加了一家新公司Philips＆＃34;飞利浦和Dave是数据库中的价值）

因为公司名称可能包含不安全的html标签，例如

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

angular会对字符串进行清理。

但是前端应显示一些链接，以确保只显示保存链接（由我的api创建）。我决定在api中添加两个返回值：

event.links 
event.linknames

event.links包含链接（项目的网址，网址始终是安全的，而不是基于用户输入的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]公司，但该链接仍然是安全的。我使用角1.6.4

如何使更换的部件可以点击并保持未更换部件的消毒？

Answer 1

您可以为简单的不安全html绑定添加自己的指令。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用ng-sanitize - Linky在文本输入中查找链接并将其转换为html链接。支持http / https / ftp / mailto和普通电子邮件地址链接。

https://docs.angularjs.org/api/ngSanitize/filter/linky

Angular用链接替换不安全文本的一部分

2 个答案: