Kendo Grid：在Angular中获取widget实例

Question

我试图在我的Angular Controller中获得Kendo网格的一个实例，所以我可以尝试连接一些事件（并调用方法）我知道这可能不是最佳实践（和应该使用自定义指令），但根据documentation，我们应该能够使用...

<div ng-app="app" ng-controller="MyCtrl"> 
<input kendo-datepicker="datePicker" k-on-change="onChange()"> 
</div> 
<script> 
angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", 
    function($scope) { 
$scope.onChange = function() { 
alert($scope.datePicker.value()); 
}; 

}）;

所以，我试图做与网格相同。我有以下的标记......

<div ng-controller="Grid"> 
    <div kendo-grid='grid' k-options="vm.gridOptions"></div> 
</div> 

，然后在控制器JS文件..

angular 
    .module("mygrid") 
    .controller("Grid", ['$scope', Grid]); 

    function Grid($scope) {    
     var gridInstance = $scope.grid; 
     ... 

可以看出here

然而，gridInstance永远是不确定的。有谁知道我是否应该能够在网格中做到这一点，如果有的话，为什么上述总是返回undefined？

预先感谢任何帮助

彼得

Answer 1

两个问题：

1. 如果使用“控制器”语法，你需要前缀你想要的东西访问（在你的例如，您需要kendo-grid="vm.grid"而不是kendo-grid="grid"
2. 当您的控制器被实例化时，Kendo UI小部件尚不存在（类似问题here），所以您需要等待它使用一个全球性的剑道UI事件

所以你的HTML变为：

<div data-ng-app="app"> 
    <div data-ng-controller="Grid as vm"> 
     <div kendo-grid="vm.grid" k-options="vm.options"></div> 
     <div>{{vm.msg}}</div> 
    </div> 
</div> 

您的应用程序：

(function() { 
    angular.module("app", ["kendo.directives"]) 
     .controller("Grid", ["$scope", Grid]); 

    function Grid($scope) { 
     var vm = this; 

     var gridData = [{ 
      col1: 'data1', 
      col2: 'data2' 
     }, { 
      col1: 'data1', 
      col2: 'data2' 
     }]; 

     vm.options = { 
      dataSource: gridData, 
      editable: true 
     }; 

     $scope.$on("kendoRendered", function (event) { 
      var gridInstance = vm.grid; 
      console.log(vm); 
      vm.msg = gridInstance === undefined ? "undefined" : "defined"; 
     }); 
    } 
})(); 

（updated demo）