Angularjs 角度`ng click`不在DataTables表行中工作

我有一个angular应用程序，它也在使用jquery.dataTables。当我使用datatables在表数据中使用

ng click

angular指令构建动态表时，它不会触发

ng click

事件

我怀疑我需要使用angular

$compile

服务，但我没有成功地找到清晰的文档或示例

任何帮助都将不胜感激

更新：我在DataTables方法中的createdRow选项中添加了一些代码。我现在好像要开枪了，但我出错了

0x800a01b6-JavaScript运行时错误：对象不支持属性 或方法“$apply”

这是我的密码：

var-app=angular.module（'appy'，[]）；
应用程序控制器（'myCtrl'[
函数（）{
var_this=这个；
$（“#报告”）。数据表({
数据：[{
“姓氏”：“能源部”，
“链接”：“测试警报”
}],
栏目：[{
“头衔”：“姓氏”，
“数据”：“LastName”
}, {
“标题”：“行动”，
“数据”：“链接”
}],
createdRow：函数（行、数据、数据索引）{
$compile（angular.element（row.contents（））（\u this）；
}
});
this.buttonAlert=函数（）{
$（'#buttondiv'）.addClass（'success'）；
};
this.htmlAlert=函数（）{
$（'htmltablediv'）.addClass（'success'）；
};
this.dataTablesAlert=函数（）{
$（'#datatablediv'）.addClass（'success'）；
};
}
]);
div{
边缘顶部：15px；
填充物：5px；
}
div.borderdiv{
边框：1px纯黑；
}
运输署{
边框：1px纯黑；
填充：2件
}
.成功{
背景颜色：绿色；
}

带有ng click的按钮
测试警报
带有ng click的HTML表
姓
行动
雌鹿
测试警报
带有单击的数据表
$compile
接收HTML片段并返回所谓的链接函数。此函数使用一个
$scope
，它将使用它来执行所有数据绑定

这可能会让人困惑，因为您使用的是控制器作为语法（这是一件好事），所以您不直接处理
$scope

这里需要做的两件事是将
$compile
和
$scope
注入控制器，然后使用它们

//Using array injector notation here
app.controller('myCtrl', 
['$scope','$compile',
  function($scope, $compile) {
     //snip...
  }
]);

然后，当您稍后链接行时，可以使用注入的
$scope
调用它，如下所示：

$compile(angular.element(row).contents())($scope);

如果您运行下面的代码段，您可以看到它都按预期工作


var-app=angular.module（'appy'，[]）；
app.controller（'myCtrl'，['$scope'，'$compile'，
函数（$scope$compile）{
var_this=这个；
$（“#报告”）。数据表({
数据：[{
“姓氏”：“能源部”，
“链接”：“测试警报”
}],
栏目：[{
“头衔”：“姓氏”，
“数据”：“LastName”
}, {
“标题”：“行动”，
“数据”：“链接”
}],
createdRow：函数（行、数据、数据索引）{
$compile（angular.element（row.contents（））（$scope）；
}
});
this.buttonAlert=函数（）{
$（'#buttondiv'）.addClass（'success'）；
};
this.htmlAlert=函数（）{
$（'htmltablediv'）.addClass（'success'）；
};
this.dataTablesAlert=函数（）{
$（'#datatablediv'）.addClass（'success'）；
};
}
]);
div{
边缘顶部：15px；
填充物：5px；
}
div.borderdiv{
边框：1px纯黑；
}
运输署{
边框：1px纯黑；
填充：2件
}
.成功{
背景颜色：绿色；
}

带有ng click的按钮
测试警报
带有ng click的HTML表
姓
行动
雌鹿
测试警报
带有单击的数据表
适用于希望从外部访问$compile和$scope并将其应用于datatable行的用户。。这是我的答案


“fnRowCallback”：函数（nRow、aData、iDisplayIndex）{
var$injector=angular.element（document.body）.injector（）；
var scope=angular.element（document.body.scope（）；
$injector.invoke（函数（$compile）{
$compile（nRow）（范围）；
});
}，
这是Jquery数据表的全部内容

"Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
createdRow: function(row, data, dataIndex) {
    $compile(angular.element(row).contents())(_this);
)

“链接”：“测试警报”
createdRow：函数（行、数据、数据索引）{
$compile（angular.element（row.contents（））（\u this）；
)

这样写

  "Link": "<button type='button' ng-click='Ctrl.dataTablesAlert()'>Test Alert</a>"
    createdRow: function(row, data, dataIndex) {
        $compile(angular.element(row).contents())(_this);
        $compile(angular.element(data).contents())(_this);
    )

“链接”：“测试警报”
createdRow：函数（行、数据、数据索引）{
$compile（angular.element（row.contents（））（\u this）；
$compile（angular.element（data.contents（））（\u this）；
)

这解决了我对Jquery datatable的问题

但是如果您有angulrjs datatable，并且无法使用ng click或angulrjs的其他事件，那么您只需编译

app.controller('auditListController', function($scope, $compile){ 
    html = "<a href='javascript:void(0)' ng-click='myfunction("+ myvariable + ")'><i class='icon fa fa-exchange' aria-hidden='true'></i></a>";
    $compile(angular.element(html).contents())($scope);

    $scope.myfunction = function (myvar) {
        console.log("myvar", myvar);
    }
}

app.controller（'auditListController'，函数（$scope，$compile）{
html=“”；
$compile（angular.element（html.contents（））（$scope）；
$scope.myfunction=函数（myvar）{
log（“myvar”，myvar）；
}
}
你检查过这篇文章了吗：？Ignacy Kasperowicz-这是一篇不错的帖子，但它没有提到我代码中的datatables部分。我对datatables不够熟悉，无法为你提供解决方案，但我可以指出问题所在。你用于“Link”值的字符串：
“Test Alert”
不是由Angular编译的。它是一个简单的字符串，由JQuery放置在DOM中，然后浏览器将其解释为HTML，但它不是由Angular编译的，因此不会被识别为指令，也不会附加到