如何使用$compile,或者使工作成为动态生成的按钮
How to use the $compile, or make work the ng-click on dynamically generated button
我一直在处理angular和jquery数据表,问题是我想使用ng-click来处理数据表所呈现的按钮,问题是当我点击它们时什么都没有发生,我一直在研究它,发现我必须使用angular的$compile,但我不知道如何在这种特殊情况下使用它(或任何情况下(,有人能告诉我如何在动态生成的DOM上进行angular ng点击吗,谢谢,这是我的表的代码,同时我正在使用Onclick函数,它可以工作,但当我单击它时,窗口位置会更改为主页面,我不希望这样。thx
$('#sr_list').dataTable({
"sDom" : "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"aLengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"] // change per page values here
],
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 10,
"sAjaxSource": ng.api +"/srs/list",
"aoColumns":[
{"mData": "srBol"},
{"mData": "trip"},
{"mData": "shipper"},
//{"mData": "truck"},
{"mData": "consignee"},
{"mData": "trailer"},
//{"mData": "carrier"},
{"mData": "reqDate"},
//{"mData": "delDate"},
{"mData": "status"},
{"fnRender": function(oObj){
//console.log(oObj.aData);
var i=0,
link = 'reports/bol.php?bol='+oObj.aData.srBol+'',
bolBtn = '<a href="#" onClick= window.open("'+link+'") data-id="'+oObj.aData.srBol+'" class="btn btn-xs blue btn-bol"><i class="fa fa-print"></i> BoL</a>',
filediv = '<div class="btn-group"><button class="btn default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">Files..<i class="fa fa-angle-down"></i></button><ul class="dropdown-menu pull-right" role="menu"><li><span data-id="'+oObj.aData.srBol+'" class="btn btn-xs green btn-addfile fileinput-button"><i class="fa fa-plus"></i><span> File</span><input type="file" id="fileselect" data-id="'+oObj.aData.srBol+'" class="input-addfile" name="files[]" multiple="multiple"></span>',
file = "",
open= "";
while(i < oObj.aData.files.length){
var link = "uploads/"+oObj.aData.files[i],
open = 'onClick=window.open("'+link+'"")';
file = file +'<li><a href="#" '+open+' >'+oObj.aData.files[i]+'</a></li>';
i++;
}
var fileBtn = filediv+file+'</ul></div>';
if((oObj.aData.trip > 0) && (oObj.aData.statusviaje === "19")){
link = 'mapa.php?viaje='+oObj.aData.trip+'';
open = 'onClick=window.open("'+link+'")';
//console.log(open);
mapBtn = '<a href="#" '+open+' data-id="'+oObj.aData.trip+'" class="btn btn-xs yellow btn-map"><i class="fa fa-map-marker"></i> Map </a>';
return(bolBtn + fileBtn + mapBtn);
}
else{
return(bolBtn + fileBtn);
}
}
}
],
"iDisplayLength": 10,
"sPaginationType": "bootstrap_full_number",
"aoColumnDefs": [
{
'bSortable': true,
"mData": null,
"sDefaultContent": "Edit",
"aTargets": [ -1 ]
}
]
});
您将编译方法注入控制器,如下所示:
myCtrl($scope,$compile) {
//you then compile the html html with the ng-click attribute on it and inject it into the DOM
$scope.someAjaxCall = function(data) {
//pretend i got some data back here and it's a button
var button = $(data);
$compile(button)($scope);
// append your button where it needs to go
$('body').append(button);
}
}
相关文章:
- 动态按钮输出反应.js
- 表中的动态按钮用于使用Javascript(CodeIgniter)删除/编辑数据
- 动态按钮调用JavaScript函数
- 单击动态按钮时获取ImageData
- 在javascript中显示动态按钮的值
- 如何为同一类的动态按钮设置监听器
- 使用锚标记 A 在网格中创建动态按钮
- 动态按钮启用基于错误组的挖空 js
- 如果两者具有相同的 id,如何使用 jquery 单击动态按钮来删除动态跨度
- 如何使用 jquery 在正在使用 ajax 的动态按钮上触发按钮单击
- 如何在 Gmail 中使用 javascript 在动态按钮中设置图像和字体大小
- 带有jQuery的qTip动态按钮(当前使用选择器)
- 通过 jquery 具有属性的动态按钮
- 创建动态按钮以显示对话框
- TinyMCE 动态按钮/方法
- 动态按钮点击事件仅适用于最后一个按钮
- jQueryUI对话框带有使用回调的动态按钮
- 带有动态按钮和函数的javascript循环
- 在动态按钮单击时调用命名函数时的PreventDefault
- 改变动态按钮的CSS