Javascript 返回角度数据表行回调函数上的角度数据表

我有一个嵌套数据的

角度数据表

，我正试图在行单击函数上创建另一个数据表<代码>行回调父数据表的函数

这是我的外部数据表html

<table id="tblEmailsByCase" datatable="" dt-options="dtCaseOptions" dt-columns="dtCaseColumns" dt-instance="dtCaseInstance" class="display table table-striped table-bordered table-hover">
    <!-- THIS TABLE IS GENERATED DYNAMICALLY -->
</table>

但它并没有相应地发挥作用。。这是在

+

按钮单击时创建的html

当我检查生成的html时，表定义是这样的

但它不显示在网格中，也没有任何列的详细信息

---

有人知道我错过了什么吗

我们可以从您的代码中看到-

formatCaseUsersTable

方法简单地将

html2

作为字符串返回，不带字符串，因此AngularJS可以将

datatable

附加到

表

。您必须使用将字符串编译成模板，因此在您的情况下应该可以使用：

function formatCaseUsersTable(d) {
    //..

    //defining table
    var html2 = '<table id="tblCaseUsers" datatable="" dt-options="dtCaseUsersOptions" dt-columns="dtCaseUsersColumns" dt-instance="dtCaseUsersInstance" class="display table table-striped table-bordered table-hover">';
    //....

    return $compile(angular.element(html2))($scope);
} 

函数formatCaseUsersTable（d）{
//..
//定义表
var html2=''；
//....
返回$compile（angular.element（html2））（$scope）；
} 

在您的示例中，我不喜欢将AngularJS与jQuery混合在一起的想法，但看起来您只是在

formatCaseUsersTable

方法中返回

html2

字符串，而不编译它，因此AngularJS可以附加

datatable

指令。您尝试过建议的解决方案吗？@StanislavKvitash很抱歉反应太晚。。。有点忙…哦，伙计。。。这确实很神奇。。返回$compile（angular.element（html2））（$scope）；谢谢你…让它回答，这样我就可以标记它了…太好了，它帮助了你，添加为答案：）

//CALLED TO CREATE SUB GRID
function formatCaseUsersTable(d) {

    //if detail does not exist
    if (typeof d.users == "undefined") return;

    //defining table
    var html2 = '<table id="tblCaseUsers" datatable="" dt-options="dtCaseUsersOptions" dt-columns="dtCaseUsersColumns" dt-instance="dtCaseUsersInstance" class="display table table-striped table-bordered table-hover">';

    $scope.dtCaseUsersInstance = {};
    $scope.dtCaseUsersOptions = DTOptionsBuilder.fromSource(d.users)
        .withOption('data', d.users) //pass data source here
        .withOption('dataSrc', '')
        .withOption('rowCallback', rowCallbackCaseUsers)
        .withOption('createdRow', createdRowCaseUsers)

    //define columns
    $scope.dtCaseUsersColumns = [
        DTColumnBuilder.newColumn('btn').withTitle(''), //this is to show the '+' button
        DTColumnBuilder.newColumn('userId').withTitle('User Id'),
        DTColumnBuilder.newColumn('userName').withTitle('User Name'),


    ];

  //add button in each row.. this button will be used to show user that the row is expandable
    for (i = 0; i < d.users.length; i++) {
        if(d.users[i].emailsDetail != null && d.users[i].emailsDetail.length > 0 )
        {
            d.users[i].btn = '<button id="' + 'btn' + i + '">+</button>';
        }
    }

    return html2;
}

function formatCaseUsersTable(d) {
    //..

    //defining table
    var html2 = '<table id="tblCaseUsers" datatable="" dt-options="dtCaseUsersOptions" dt-columns="dtCaseUsersColumns" dt-instance="dtCaseUsersInstance" class="display table table-striped table-bordered table-hover">';
    //....

    return $compile(angular.element(html2))($scope);
}