Question

我正在使用angular-datatables。我使用内联模板呈现了一列Actions。我想访问该模板中的当前行数据。怎么样？

控制器

$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
        url: '/api/department',
        type: 'GET'
    })
    .withDataProp('data')
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers')
    .withOption('createdRow', function (row, data, dataIndex) {
        return $timeout(function() {
            // Recompiling so we can bind Angular directive to the DT
            return $scope.$apply($compile(angular.element(row).contents())($scope));
        });
    })
    .withBootstrap();
$scope.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('name').withTitle('Name'),
    DTColumnBuilder.newColumn('actions').withTitle('Actions').withOption("searchable", false)
];

查看

<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="DepartmentsController">
    <!-- Inline Template -->
    <script type="text/ng-template" id="actions.html">
         <button class="btn btn-primary btn-xs" 
              ng-click="edit(/** CURRENT ROW ELEMENT ID */)"><i class="fa fa-edit"></i> Edit</button>
         <button class="btn btn-danger btn-xs" 
              ng-click="delete()"><i class="fa fa-trash"></i> Delete</button>
    </script>
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h3">Departments</h1>
    </div>
    <div class="wrapper-md">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-6">
                        <button class="btn m-b-md btn-md btn-primary " ui-sref="manager.departments.create">
                            <i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">Add Department</span></button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 m-b-xs">
                        <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped b-t b-b">
                            <thead>
                                <tr>
                                    <th style="width:20%">ID</th>
                                    <th style="width:60%">Name</th>
                                    <th style="width:20%">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

以下是帮助您的帮助：http://plnkr.co/edit/iAZBof7g6cp68RnM0X8H?p=preview

Answer 1

经过几个小时的奋斗，我找到了解决方案。你看到它时非常明显。

我创建了一个新的范围，并在将其传递给createRow回调中的$ compile之前向其添加了数据。创建新范围是将唯一数据传递到每一行所必需的。如果您只是通过$scope.row传递，则每行将具有与处理的最后一行相同的行。

<强>控制器

.withOption('createdRow', function (row, data, dataIndex) {
       // Create a new scope for each row, otherwise, data will
       // not be unique for each row becuase of data bindings
       var $newScope = $scope.$new(true);
       $newScope.row = data;

       // Pass any methods you are using in current scope
       $newScope.delete = $scope.delete;

       return $timeout(function() {
                // Recompiling so we can bind Angular directive to the DT
                return $scope.$apply($compile(angular.element(row).contents())($newScope));
            });
        });

查看

<script type="text/ng-template" id="actions.html"> <button class="btn btn-primary btn-xs" ui-sref="manager.departments.edit({id: {{ row.id }} } )"><i class="fa fa-edit"></i> Edit</button> <button class="btn btn-danger btn-xs" ng-bootbox-confirm="Are you sure you want to delete this department?" ng-bootbox-confirm-action="delete(row.id)"><i class="fa fa-trash"></i> Delete</button> </script>

Answer 2

我使用了上面的accepted answer，它运行正常。但是，稍后当我们转向生产并且每页的行数从20更改为500时，我通过Chrome开发人员工具看到了重大的性能问题（花费在数百setTimer和监听器上的大部分时间事件）

我找到了官方文档here，它给出了一个例子如下：

.withOption('createdRow', createdRow);

// ...

function createdRow(row, data, dataIndex) {
    // Recompiling so we can bind Angular directive to the DT
    $compile(angular.element(row).contents())($scope);
}

这段代码不使用$timeout或$apply函数，但仍能正常运行。如果你像我一样遇到性能问题，这可能有所帮助。

如何使用模板访问角度数据表中的当前行数据？

2 个答案: