Datatables中的Angularjs和动态html内容

我有一个角度应用程序，我有一个Datatable。在数据表中，我将单元格内容更改为包含html内容。Datatables中的Angularjs和动态html内容

在下面的代码中，我更改第五列的单元格内容以获得链接。我希望有一个工具提示，告知用户有关链接。我正在使用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，但我不太确定如何使用它。

来源

2017-05-26 Kihats

你对使用编译是正确的。

尝试改变下面一行：

$(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>

来源

2017-05-26 08:24:32

谢谢。这工作 – Kihats

没问题，很高兴我可以帮助！ –

关于你的侧面说明，也许你可以用清洁器（或者更多的AngularJS）来处理数据表的方式，让我指向正确的方向。 – Kihats

Datatables中的Angularjs和动态html内容

回答

相关问题