javascript - Angularjs 和数据表中的动态 html 内容

Question

我有一个 Angular 应用程序，其中有一个数据表。在数据表中，我将单元格内容更改为包含 html 内容。

在下面的代码中，我将第 5 列的单元格内容更改为具有链接。我希望有一个工具提示来通知用户有关链接的信息。我正在使用 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);

          }
      });
  });

我在 groupLink html 内容中添加了 uib-tooltip 指令。

问题是工具提示没有出现。我听说过使用 $compile 但我不太确定如何使用它。

Answer 1

关于使用编译，你是对的。

尝试更改以下行:

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

对此:

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

同时不要忘记将 $compile 服务注入(inject)到您的 Controller 中。

编辑

这绝对不是解决问题的最干净(或最 AngularJS)的方法，但根据您当前的设置可能是最简单的方法。最好的方法可能是创建一个新指令来处理您的数据表，但这超出了这个问题的范围。

编辑2

总体思路是创建指令以将 DOM 操作与您的 Controller /服务分离。

查看官方 AngularJS 文档 (https://docs.angularjs.org/guide/directive) 了解如何创建指令。您的目标可能是通过服务获取 Controller 中的数据并将其传递到您的指令中以处理 DOM 操作。例如像这样:

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