AngularJS Связать ячейки со ссылками в таблице после того, как таблица была отображена в DOM

Я пытаюсь манипулировать HTML таблицы, чтобы заменить весь текст в ячейках, которые имеют ссылки на <a> ссылка, по которой можно кликнуть, используя 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>';
  });
}

Однако он не отображает ссылки как интерактивные элементы ссылок.

Важным примечанием является то, что таблица динамически добавляется сторонним плагином, поэтому я могу манипулировать им только после его загрузки. Следовательно, почему в названии я упомянул после того, как таблица была предоставлена.

Как я могу использовать угловые JS, чтобы связать ячейки? Или использовать sanitize для рендеринга нового HTML?

Источник

1 ответ

Решение

Вы видите это как текст, потому что ng-model или {{}} показывает только текст, вам нужно показать их как html, и в этом случае вы можете использовать директиву ngBingHtml. Чтобы использовать его, вы должны включить в свой проект angular-sanitize и после него в своей таблице вы можете использовать это следующим образом:

Вот рабочий пример

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>

Источник
Другие вопросы по тегам