包含模板的自定义命令的AngularJS kendo网格不处理事件

Question

我有一个angularjs - 基于剑道UI网格的解决方案.在网格的控制器中,我放置了以下代码:

$scope.customClick = function(e) {       
    $scope.$apply(
                function() {
                    e.preventDefault();
                    alert('customClick');
                });
}; 

$scope.gridOptions = {
    dataSource: $scope.gridData,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    scrollable: true,
    sortable: true,
    filterable: true,
    selectable: true,
    editable: "inline",
    columns: [
        {
          command :[ {text: "", template: '<input type="checkbox" id="check-all"  />', click: $scope.customClick} ]

        },
        {field: "DocumentKey", title: "Document Key"},
        {field: "Sender", title: "Sender"},
        {field: "Recipient", title: "Recipient"},
        {field: "ChangeDate", title: "ReceivedBy Time"},
        {field: "FlowComment", title: "Comment"},
        {field: "Location", title: "Location"}
        ]
    };

});

添加checkbox显示正常,但我不知道如何处理click事件.$scope.customClick单击复选框后不会触发.

Answer 1

一个相当古老的问题,用户可能很久以前就找到了解决方案,但是如果谷歌搜索让某人接受这个问题,那么得到答案是件好事.结合KendoUI和AngularJS等库的JavaScript通常允许我们通过使用几种不同的方法来解决问题,但这里有一个:

假设您有一个这样定义的网格:
<div kendo-grid="kendo.myGrid" k-options="gridOptions"></div>

用于定义此网格的JavaScript代码可能如下所示:

$scope.gridOptions = {
            dataSource: new kendo.data.DataSource({
                data: dataFromSomeLocalVariableMaybe,
                pageSize: 10
            }),
            sortable: true,
            pageable: {
                pageSizes: [10, 20, 50]
            },
            columns: [{
                field: "column1",
                title: "Column 1",
                width: "100px"
            }, {
                field: "column2",
                title: "Column 2",
                width: "120px"
            }, {
                command: [{
                    template: "<span class='k-button' ng-click='doSomething($event)'> Do something</span>"
                }, {
                    template: "<span class='k-button' ng-click='doSomethingElse($event)'> Do something else</span>"
                }],
                title: " ",
                width: "100px"
            }]
        };

请注意,$event它将传递给ng-click调用函数.该$事件包含实际的点击事件数据.

如果它是这样的,那么你需要定义这两个函数:

$scope.doSomething = function($event) {
    // Get the element which was clicked
    var sender = $event.currentTarget;

    // Get the Kendo grid row which contains the clicked element
    var row = angular.element(sender).closest("tr");

    // Get the data bound item for that row
    var dataItem = $scope.kendo.myGrid.dataItem(row);

    console.log(dataItem);
};

$scope.doSomethingElse = function($event) {
    // Do something else
};

就是这样.