添加到使用 AngularJS 数据 table 生成的 table 的按钮未在当前 escope 中执行功能

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 按钮。至少它产生了不同的结果。

原版POST

我有一个 table 用 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

.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() 添加到 table 最后一列的操作按钮每个都会收到一个操作：删除和编辑。

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

// 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 文档，以下函数编译每一行：

function createdRow(row, data, dataIndex) {
    $compile(angular.element(row).contents())($scope);
}

然后你要在选项里加上:

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>.

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

谢谢 Whosebug 社区！

添加到使用 AngularJS 数据 table 生成的 table 的按钮未在当前 escope 中执行功能

Buttons added to a table generated with AngularJS Datatables are not executing functions in the current escope

angularjs

angular-datatables