Question

修改

我尝试更新函数actionButtons（）：

function actionButtons(data, type, full, meta) {
    vm.project[data.id] = data;
    var html = '<button class="btn btn-info btn-xs" ng-click="project.editProject(' + data.id + ')">' +
           '   <i class="fa fa-edit"></i>' +
           '</button>&nbsp;' +
           '<button class="btn btn-danger btn-xs" ng-click="project.deleteProject(' + data.id + ')">' +
           '   <i class="fa fa-trash-o"></i>' +
           '</button>';
    el = $compile(html)($scope);
    return el;
}

现在它呈现[Object][Object]而不是HTML按钮。至少它产生了不同的结果。

原始帖子

我有一个用AngularJS Datatables构建的表格，如下所示：

HTML

<div ng-controller="ProjectCtrl as project">
    <table datatable="" dt-options="project.standardOptions" dt-columns="project.standardColumns" dt-instance="project.dtInstance" class="table table-condensed table-striped table-bordered table-hover" width="100%">
        <thead>
            <tr>
                <th data-hide="phone">ID</th>
                <th data-class="expand"> Processo</th>
                <th data-class="expand"> Objeto</th>
                <th data-hide="phone"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> UF</th>
                <th>Região</th>
                <th data-hide="phone,tablet"> Macrossegmento</th>
                <th data-hide="expand"> </th>
            </tr>
        </thead>
    </table>
</div>

的JavaScript /控制器

.controller('ProjectCtrl', function($scope){
    vm.standardOptions = DTOptionsBuilder
            // TODO: Get the data below from a service
            .fromSource('/api/BasesDados/Concessoes/concessoes.php')
            .withOption('scrollX', '100%')
            .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                    "t" +
                    "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
            .withBootstrap()
            .withButtons([
                {extend: 'colvis', text: 'View'},
                {extend: 'copy', text: 'Copy'},
                {extend: 'print', text: 'Print'},
                {extend: 'excel', text: 'MS Excel'},
                {
                    text: 'Add project',
                    key: '1',
                    action: function (e, dt, node, config) {
                        $scope.addProject();
                    }
                }
            ]);

    // Rendered columns. ID is not shown
    vm.standardColumns = [
        DTColumnBuilder.newColumn('id').notVisible(),
        DTColumnBuilder.newColumn('processo'),
        DTColumnBuilder.newColumn('objeto'),
        DTColumnBuilder.newColumn('uf'),
        DTColumnBuilder.newColumn('regiao'),
        DTColumnBuilder.newColumn('macro'),
        DTColumnBuilder.newColumn(null).withTitle('Ações').notSortable().renderWith(actionButtons)
    ];

    // Action buttons added to the last column: to edit and to delete rows
    function actionButtons(data, type, full, meta) {
        vm.project[data.id] = data;
        return '<button class="btn btn-info btn-xs" ng-click="project.editProject(' + data.id + ')">' +
               '   <i class="fa fa-edit"></i>' +
               '</button>&nbsp;' +
               '<button class="btn btn-danger btn-xs" ng-click="project.deleteProject(' + data.id + ')">' +
               '   <i class="fa fa-trash-o"></i>' +
               '</button>';
    }
});

通过函数actionButtons()添加到表格最后一列的操作按钮每个都会收到一个操作：删除和编辑。

但是，这些功能似乎不响应对这些操作按钮的点击：

// Edit a project
$scope.editProject= function(projetoId){
    console.log(projetoId);
}
// Delete a project
$scope.deleteProject= function(projetoId){
    console.log(projetoId);
}

请注意，按钮会收到参数：

<button ng-click="project.editProject(5026)">Editar</button>

它必然是对AngularJS范围的概念误解。在这种情况下，我做错了什么？

代码不会引起任何错误，因为我可以通过浏览器控制台（Google Chrome 56. ，Mozilla Firefox 50。，MSIE 11。*）的输出注意到。

我的代码在IIS 8.5上运行（我认为这无关紧要）。

Answer 1

找到了解决方案。

根据AngularJS Datatables文档，以下函数编译每一行：

vm.standardOptions = DTOptionsBuilder
        .fromSource(urlToTheData)
        .withOption('createdRow', createdRow) // Here, I recompile the table's rows
        .withOption('scrollX', '100%')
        ...

然后你必须将它添加到选项中：

ng-click

我还必须从<button ng-click="project.editProject(5026)">Edit</button>删除控制器别名：

从此<button ng-click="editProject(5026)">Edit</button>

致{{1}}。

感谢@AsielLealCeldeiro我添加了一个$ compile（搜索文档）并感谢@Yaser我使用了编译服务。

感谢StackOverflow社区！

添加到使用AngularJS Datatables生成的表中的按钮不会在当前escope中执行函数

1 个答案: