Question

我刚刚进入AngularJS世界（并且喜欢它）。除此之外，我还在使用（购买的）Bootstrap设计包。在该包中是使用datatables.net插件的表格布局。我有一个Angular控制器使用表通过RESTful API正确检索事物，但是在每一行我都希望有一个按钮来编辑＆＃34; - 弹出一个模态。（弹出窗口不是问题。）

我的挑战来自于我想要＆＃34;渲染＆＃34;每行的按钮。根据DataTable引用，有一个名为＆＃34; mRender＆＃34;的参数。用于具有自定义字符串的给定行的数据。有趣的是，我希望按钮能够使用ng-click。由于Angular在DOM渲染之前被初始化，因此不能很好地工作。

在进行研究时，我发现$ compile方法提供了相当多的函数，用于在Angular中呈现具有已注册事件的DOM元素。问题是，DataTable API并不需要它想要HTML的DOM元素。我尝试了一个小的jQuery装备转换回to.html（），它很适合在页面上获取按钮，但点击事件没有注册。

我真的不想装备任何东西。我希望这是一个合适的设计。这就是说我正在寻找关于如何在Angular中注册按钮点击事件但使用DataTable.net函数的建议。

下面是我在Angular控制器中初始化DataTable ......

myDataTable = $('#datatable4').dataTable({
  paging: true,  // Table pagination
  ordering: true,  // Column ordering 
  info: true,  // Bottom left status text
  ajax: {
    url: 'http://+++++++++++++++++/MemberService.svc/GetMemberList/',
    dataSrc:''
  },
  aoColumns: [
    { mData: 'MemberID'},
    { mData: 'Email' },
    { mData: 'FirstName' },
    { mData: 'LastName' },
    { mData: 'InsertDate' },
    {
      mData: 'MemberID',
      //asSorting: ['asc, desc'],
      bSearchable: false,
      bSortable: false,
      bVisible: true,
      mRender: function (d, t, f) {
        var s = '<div class="buttons">'
        + '<button ng-click="showUser(' + d + ')" title="Edit" class="btn btn-sm btn-info">'
        +'<em class="fa fa-pencil"></em>'
        +'</button>'
        + '<button ng-click="removeUser(' + d + ')" title="Delete" class="btn btn-sm btn-danger">'
        +'<em class="fa fa-trash"></em>'
        +'</button>'
        + '</div>';
        return s;
      }
    },
  ]
});

BootStrap / AngularJS框架中带有DataTable插件的动态按钮

0 个答案: