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）