如何在 angular 指令的帮助下访问 kendo 网格？

Question

我的网格结构如下

 $scope.grid = $("#prospectsGrid").kendoGrid({
 columns: [
 { template: "<input type='checkbox' class='checkbox' />", width: "3%" },
 { template: "#= FirstName + ' ' + LastName #", title: "Name" },
 { field: "FirstName", hidden: true },
 {
 command: [
 {
 name: "edit",
 text: "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>"
 }
}).data("kendoGrid");

如您所见，我正在借助标识符 #prospectsGrid 访问此网格。现在，在不更改网格内的任何功能的情况下，我需要用一些 angular 元素替换标识符 (#prospectsGrid)。我怎样才能做到这一点？任何帮助，将不胜感激。

仅供参考我的HTML代码是

<div id="prospectsGrid" class="gridcommon"></div>

Answer 1

正如 micjamking 在评论中所说，您需要在模块中注入 KendoUI 指令。

angular.module("myApp",["kendo.directives"])

然后你可以在你的html代码中使用类似这样的东西

<div kendo-grid="myKendoGrid"
     k-options="myKendoGridOptions">
</div>

在控制器中：

angular.module("managerOMKendo").controller("myController", function ($scope) {
     // Functions controller
     $scope.createMyGrid = function () {
         $scope.myKendoGridOptions = {
               columns: [ {
                   field: "FirstName",
                   template: "<input type='checkbox' class='checkbox' />", width: "3%"
                   },
                   command: [{
                       name: "edit",
                       text: "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>"
                   }]
                   // Here you can put your complete configuration. Check official example
              }
         }
     }
     // Main thread
     $scope.createMyGrid(); // call the function that creates the grid
});

这是official example
您可能需要改变一些东西。例如，我写了 text，也许你必须写 template。没有 plunker 很难。

祝你好运！

如何在 angular 指令的帮助下访问 kendo 网格？

How to access kendo grid with the help of angular directive?

kendo-ui

angularjs

kendo-grid