AngularJS 在 DOM 中呈现 table 之后，使用 table 中的链接链接单元格

Question

我正在尝试操纵 table 的 html 以将具有 link 的单元格中的所有文本替换为 <a> link使用 AngularJS 可点击。

加载 DOM 时，我有以下代码：

...
$("td").each(function (index) {
  if($(this).text())
  {
      $(this).text($ctrl.linkify($(this).text().toString()));
  }
});
...

$ctrl.linkify = function(text) {
  var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(urlRegex, function (url) {
         return '<a href="' + url + '">' + url + '</a>';
  });
}

但是它不会将 link 呈现为可点击的 link 元素。

重要的一点是 table 是由第三方插件动态添加的，因此我只能在加载之后对其进行操作。因此，为什么在呈现 table 之后我在标题中提到了。

如何使用 angular js 来 link 化单元格？或者使用 sanitize 渲染新的 html?

Answer 1

您将其视为文本 因为 ng-model 或 {{}} 仅显示文本，您需要将它们显示为 html，在这种情况下 你可以使用 ngBingHtml 指令。 要使用它，您必须将 angular-sanitize 添加到您的项目中，然后在您的 table 中，您可以这样使用：

这是一个工作示例

var editor = angular.module("editor",['ngSanitize']);
var app = angular.module('plunker', ['editor']);


editor.controller('EditorController', function($scope) {

    $scope.values = ['Normal text', 
                     'https://www.google.com/', 
                     'This is not a link'];
    $scope.replaceUrlWithATag = function(text){
      var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
      return text.replace(urlRegex, (url) => {return '<a href="' + url + '">' + url + '</a>'});
    }
});


editor.directive("editorView",function(){
  return {
    restrict :"EAC",
    templateUrl : "editor.html",
    scope : {
        content : "=editorView"
    },
    link : function(scope,element,attrs){
        
    }
  };
});

app.controller('BaseController', function($scope) {
  $scope.content = 'World';});

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-sanitize.min.js"></script>
</head>
<body>
  <div ng-controller="EditorController">
    <table class="table table-bordered">
        <tr>
            <th>ID</th>
            <th>Value</th>
        </tr>
        <tr ng-repeat="v in values">
            <td>{{$index}}</td>
            <td ng-bind-html="replaceUrlWithATag(v)"></td>
        </tr>
    </table>
</div>
</body>
</html>

AngularJS 在 DOM 中呈现 table 之后，使用 table 中的链接链接单元格

AngularJS Linkify cells with links in a table after table has been rendered in the DOM

javascript

angularjs

angularjs-1.6