How to get double click event in angular-datatables

Question

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.

$(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

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 is just directives that make them work in a AngularJS context. Unless you are rendering "the angular way", i.e datatable="ng" you will need to $compile the table, the rows or each cell in callbacks if you want any directive to work.

Simply use a delegated event handler as you would do with jQuery DataTables, and grab the data through dtInstance which among other things hold the API instance :

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

---

Update: http://plnkr.co/edit/PdrKxxxsDFdNSzgf8c07?p=preview

Answer 2

We can write a custom directive logic and resolve the issue. can you please refer directive .

html code

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

angular code

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 style:

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

You can find your element and render the event for specific element(#myTable li)