如何使用$compile,或者使工作成为动态生成的按钮

How to use the $compile, or make work the ng-click on dynamically generated button

本文关键字:动态 按钮 工作 何使用 compile 或者      更新时间:2023-09-26

我一直在处理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);
  }
}