Angularjs und dynamischer HTML-Inhalt in Datatables

Question

Ich habe eine eckige Anwendung, wo ich eine Datentabelle habe. In der Datentabelle ändere ich Zelleninhalt, um HTML-Inhalt zu enthalten.

Im folgenden Code ändere ich den Zellinhalt der 5. Spalte, um Links zu haben. Ich möchte einen Tooltip haben, der den Benutzer über den Link informiert. Ich verwende UI Bootstrap.

var app = angular.module('smsmanagement', ['ngRoute', 'ui.bootstrap']); 
app.controller('RecipientsController', function ($scope, $http, $routeParams, $timeout, SweetAlert) { 

var groupID = $routeParams.param; 

    $('#table-recipients-view').DataTable({ 
     sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>", 
     "processing": true, 
     "serverSide": true, 
     "ajax": { 
      "url": "recipients/dt", 
      "data": function (d) { 
       d.groupID = groupID; 
      } 
     }, 
     "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       var groupLink = ''; 
       // The number of columns to display in the datatable 
       var cols = 6; 

       var rowElementID = aData[(cols - 1)]; 

       groupLink = '<a href="#smsgroups/' + rowElementID + '" uib-tooltip="View group(s)">' + noOfGroups + '</a>'; 

      // Create a link in no of groups column 
       $(nRow).children('td:eq(' + (cols - 2) + ')').html(groupLink); 

      } 
     }); 
    }); 

Ich habe die uib-tooltip Richtlinie in groupLink html Inhalte hinzugefügt.

Das Problem ist, der Tooltipp wird nicht angezeigt. Ich habe gehört, $compile zu verwenden, aber ich bin nicht ganz sicher, wie man es benutzt.

Answer 1

Mit der Kompilierung haben Sie recht.

Versuchen Sie, die folgende Zeile zu ändern:

$(nRow).children('td:eq(' + (cols - 2) + ')').html(groupLink); 

Um dies:

$(nRow).children('td:eq(' + (cols - 2) + ')').html($compile(groupLink)($scope)); 

Vergessen Sie auch nicht $compile Service an Ihre Steuerung zu injizieren.

bearbeiten

Dies ist definitiv nicht das sauberste (oder die meisten AngularJS) Weg, um das Problem zu lösen, aber wahrscheinlich die einfachste Ihre aktuellen Einstellungen gegeben. Der beste Ansatz wäre wahrscheinlich, eine neue Direktive zu erstellen, die sich mit Ihren Datentabellen befasst, aber das ist nicht im Rahmen dieser Frage.

Edit 2

Die allgemeine Idee ist die Richtlinie erstellen DOM-Manipulation von Ihrem Controller/Dienstleistungen zu entkoppeln.

In der offiziellen AngularJS-Dokumentation (https://docs.angularjs.org/guide/directive) erfahren Sie, wie Sie eine Richtlinie erstellen. Dein Ziel ist wahrscheinlich etwas, das die Daten in den Controller über einen Service bringen und in deine Direktive einbringen würde, um mit der DOM-Manipulation fertig zu werden. Zum Beispiel so:

<my-data-table data="dataVariableInScope"></my-data-table>