Kendo Grid: Uzyskanie instancji widgetu w Angular

Question

Próbowałem uzyskać instancję siatki Kendo w ramach kontrolera Angular, więc mogę spróbować połączyć się z niektórymi zdarzeniami (i metodami połączeń) Wiem, że to nie jest najlepsza praktyka (i prawdopodobnie powinien użyć dyrektywy niestandardowy), ale zgodnie z documentation, powinniśmy być w stanie wykorzystać ...

<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()); 
}; 

});

Próbowałem zrobić to samo z siatką. Mam następujący znaczników ...

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

a następnie w pliku sterownika js ..

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

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

jak widać here

Jednak gridInstance zawsze jest niezdefiniowany. Czy ktoś wie, czy będę mógł to zrobić z siatką, a jeśli tak, dlaczego powyższe zawsze zwraca undefined?

Dzięki z góry za wszelką pomoc

Peter

Answer 1

dwie kwestie:

1. W przypadku korzystania z „kontrolera jako” składnia, trzeba poprzedzić rzeczy, które chcesz otworzyć (w swojej obudowa, potrzebujesz kendo-grid="vm.grid" zamiast kendo-grid="grid"
2. Gdy Twój kontroler jest utworzony, widżet Kendo UI jeszcze nie istnieje (podobne pytanie: here), więc musisz poczekać go za pomocą globalnego wydarzenia Kendo UI

Więc HTML staje:

<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> 

swoją aplikację:

(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)