Angularjs ng-click 在 Kendo Grid 中不起作用答案

【问题标题】：Angularjs ng-click does not work in Kendo GridAngularjs ng-click 在 Kendo Grid 中不起作用
【发布时间】：2013-12-03 12:50:42
【问题描述】：

使用 angularjs 和 kendo 网格我试图调用一个函数来选择网格中的复选框。但无论我做什么，在 ng-click 中都没有发生任何事情，甚至不会引发错误。我在调用的方法顶部添加了 console.log() ，但没有显示任何内容。我试图在范围内的服务中添加方法，也直接在范围内。

基本上我的问题是如何在剑道网格单元格模板中使用 ng-click 复选框？

这里是网格绑定代码：

var cols = this.GetGridColumns(uiConfig.GridColumns);

var grid = $("#kGrid").kendoGrid({
dataSource: {
   serverPaging: true,
   serverSorting: true,
   schema: {
         data: "data",
         total: "total",
         model: {
         id: "relatedEntityID"
         }
   },
   pageSize: 10,
   transport: {
   read: function(options) {
          /* read from service */
       }
     }
   },
   columns: cols, 
   scrollable: false,
   pageable: { "refresh": true, "pageSizes": true },
   sortable: true,
   filterable: true,
   selectable: "multiple",
   change: () => this.onChange()
});

这里是

的定义

GetGridColumns(columns: Array<servicePath.SLF.solutionEngine.Model.Admin.GridColumn>): any
    {
        var colHeader = new Array();

        colHeader.push({
            template: '<input type="checkbox" id="cbItem" class="checkbox" ng-click="genericServices.selectRow(\'kGrid\', $event)" />',

            headerTemplate: '<input type="checkbox" id="check-all" ng-click="genericServices.ToggleCheckAllInGrid(\'#kGrid\', $event)" />',
            width: '30px'});

        var column = new servicePath.SLF.solutionEngine.Model.CMs.GridColumnCM();

        for (var j=0 ; j < columns.length; j++)
        {
            column = new servicePath.SLF.solutionEngine.Model.CMs.GridColumnCM();

            column.Field = columns[j].BindingName;
            column.Title = columns[j].BindingName;
            column.ColumnType = columns[j].GridColumnType;
            column.HorizontalAlignment = columns[j].HorizontalAlignment;
            column.LocalizedName = columns[j].LocalizedLabel;

            colHeader.push({ title: column.Name, field: columns[j].BindingName, template: column.Template } );
        }

        return colHeader;
    }

在上面的代码中，标题模板中的 genericServices.ToggleCheckAllInGrid 工作得很好。

这是 genericServices 的定义。

this.selectRow = function (gridId: string, e: any): void {
            gridId = '#' + gridId;
            console.log(gridId);

            var elem = angular.element(e.currentTarget);
            var row = elem.closest("tr");
            var checked = elem.prop('checked');

            if (checked) {
                //-select the row
                row.addClass("k-state-selected");
            } else {
                //-remove selection
                row.removeClass("k-state-selected");
            }
        };

【问题讨论】：

标签： javascript angularjs kendo-ui kendo-grid angularjs-ng-click

【解决方案1】：

我猜角引导程序在添加到网格（到 DOM）的行之前运行。

如果是这样，您必须手动调用 angular bootstrap。

【讨论】：

【解决方案2】：

您可以使用以下代码处理剑道网格标题上的 onclick 事件：

$('body ').on('click','.grid .k-header',function(e){

 //write your logic..
});

在剑道网格中，您不能使用 ng-click 或 onClick 事件。只有 href 有效。

【讨论】：

这就是我现在正在做的，但这似乎更像是一个 hack。
这实际上是我最终做的，但我对这个解决方案并不满意。

【解决方案3】：

如果您使用指令来响应点击怎么办？ http://docs.angularjs.org/guide/directive ng-click 很像 jQuery。

【讨论】：

我知道如何创建指令，但我该怎么做？
类似：angular.module('modulename').directive('k-header',[],function() { return { restrict: 'C', link: function($scope, $el,$attr) { $el.on('click', function(ev) { /* ... 逻辑 ... */ }); } }; });其中限制：'C' 侦听类名，链接函数返回元素。这样，您就处于 Angular 范围内，并且 Angular 会在需要时触发。