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

Posted 2023-05-08

【中文标题】数据表中的 Angularjs 和动态 html 内容

【英文标题】：Angularjs and dynamic html content in Datatables

【发布时间】：2017-10-27 01:35:13

【问题描述】：

我有一个角度应用程序，其中有一个数据表。在数据表中，我将单元格内容更改为包含 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，但我不太确定如何使用它。

【参考方案1】：

你是对的使用编译。

尝试更改以下行：

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

到这里：

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

也不要忘记将$compile 服务注入您的控制器。

编辑

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

编辑 2

总体思路是创建指令以将 DOM 操作与控制器/服务分离。

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

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

【讨论】：

没问题，很高兴能帮上忙！

关于您的旁注，也许您可​​以为我指出使用数据表的更清洁（或更多 AngularJS）方式的正确方向。

我用“更清洁”方式的一般要点更新了答案。