如何在角度数据表中获取双击事件

Question

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

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

我正在使用数据表和角度数据表。如何检测双重 数据表中的单击事件并获取行数据？我找到了代码 下面，但我需要它的角度。

DataTables 是 jQuery，Angular-DataTables 只是让它们在 AngularJS 上下文中工作的指令。除非您正在渲染“角度方式”，即datatable="ng"，否则如果您希望任何指令起作用，则需要$compile 回调中的表格、行或每个单元格。

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

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

---

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

Answer 2

我们可以编写自定义指令逻辑并解决问题。能否请您参考directive。

html代码

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

角码

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）