javascript - Angular 用链接替换部分不安全文本

Question

我的 api 返回具有以下属性的事件数组 (json):

event.text

text 属性包含一个基于用户输入的字符串，例如companyName，我想在 ng-repeat 循环中列出文本，并提供指向公司的可点击链接。 (event.text 可以是“Dave 添加了一家新公司 Philips”，其中 Philips 和 Dave 是数据库中的值)

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

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

Angular 清理字符串。

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

event.links 
event.linknames 

event.links 包含链接(项目的 url，这些 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]。为了替换标签，我编写了以下代码(在加载事件后在我的 Controller 中)。

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] 被替换，但文本仍然经过清理，并且在 View 中显示 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 是可点击的链接。

注释:我知道用户可以将其公司命名为 my[0]company，但该链接仍然是安全的。我使用的是 Angular 1.6.4

如何使更换的部件可点击并保持未更换的部件清洁？

Answer 1

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

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>