如何在 angular-datatables 中获取双击事件

Question

我正在使用数据表和 angular-数据表。如何检测数据表中的双击事件并获取行数据？我找到了下面的代码，但我在 angular.

中需要它

$(document).on("dblclick", "#myTable tr", function () {
    //code here
});

html

<table datatable="tblRecipe" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="table table-bordered"></table>

controller.js

var app = angular.module('app', ['datatables'])
app.controller('MainController', function ($scope, $window, $http, $filter, $timeout, $compile, DTOptionsBuilder, DTColumnDefBuilder, DTColumnBuilder) {
    var vm = this;
    vm.dtInstance = {};
    vm.Recipes = {};
    vm.delete = deleteRow;
    vm.edit = editRow;
    vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
        url: "/Recipes/GetAllRecipes",
        type: "POST"
    })
    .withOption('createdRow', createdRow)
    .withOption('select', true);
    vm.dtColumns = [
                    //...
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
        ];
        function actionsHtml(data, type, full, meta) {
            vm.Recipes[data.Id] = data;
            return '<a title="View"  href="javascript:void(0)" ng-click="showCase.view(showCase.Recipes[' + data.Id + '])">' +
                ' <i class="fa fa-eye" aria-hidden="true"></i>' + '</a>' + '<a title="Edit"  href="javascript:void(0)" ng-click="showCase.edit(showCase.Recipes[' + data.Id + '])">' +
                ' <i class="fa fa-pencil"></i>' + '</a>' + '<a title="Delete" href="javascript:void(0)" ng-click="showCase.delete(showCase.Recipes[' + data.Id + '])" )"="">' + ' <i class="fa fa-trash-o"></i>' + '</a>';
        };
        //...
});
});

Answer 1

我们可以编写自定义指令逻辑来解决问题。你能参考一下 directive .

html代码

<div ng-controller="MainController">
<div id="goodDiv" ngdblclick>Click Here</div>
<div id="goodDiv">Don't Click Here</div>
</div>

angular代码

angular.module("myapp", []).
controller("MainController", ["$scope", function($scope){

}]).
directive("ngdblclick", ['$compile', function($compile){
    'use strict'
    return{
        compile : function(elements, attributes){
            return{
                restrict: 'C',
                post : function(scope, element, attribute){
                    var isSingleClick = true;
                    element.bind('click', function(){
                        setTimeout(function(){
                            if(isSingleClick){
                                console.log("It's a single click");
                                return;
                            }
                        }, 500);
                    });

                    element.bind('dblclick', function(){
                        console.log("It's a double click");
                        isSingleClick = false;
                        setTimeout(function(){
                            isSingleClick = true;
                            return;
                        }, 500);
                    });
                }
            };
        }
    };
}]);

css 风格：

#goodDiv{
    width : 100px;
    height : 100px;
    background-color : green;
}

您可以找到您的元素并呈现特定元素的事件(#myTable li)

Answer 2

I am using datatables and angular-datatables. How do I detect a double click event in the datatable and get the row data? I found the code below but I need it in angular.

DataTables is jQuery, Angular-DataTables 只是使它们在 AngularJS 上下文中工作的指令。除非你正在渲染 "the angular way"，即 datatable="ng"，如果你想让任何指令工作，你将需要 $compile table，回调中的行或每个单元格。

只需像处理 jQuery DataTable 一样使用委托事件处理程序，并通过 dtInstance 获取数据，其中包含 API 实例 :

$('#tableId').on('dblclick', 'tbody tr', function() {
  console.log( $scope.dtInstance.DataTable.row(this).data() )
})

更新：http://plnkr.co/edit/PdrKxxxsDFdNSzgf8c07?p=preview

如何在 angular-datatables 中获取双击事件

How to get double click event in angular-datatables

javascript

angularjs

angular-datatables