Kendo Grid：在 Angular 中获取小部件实例

我试图在我的 Angular 控制器中获取 Kendo 网格的实例，因此我可以尝试连接一些事件（并调用方法），我知道这可能不是最佳实践（并且可能应该使用自定义指令），但是根据文档 http://docs.telerik.com/kendo-ui/AngularJS/introduction，我们应该能够使用...

<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 http://jsfiddle.net/peterjc/ocdhxxpv/2/

然而，gridInstance 始终是未定义的。有谁知道我是否应该能够使用网格来做到这一点，如果是的话为什么上面总是返回未定义？

预先感谢您的任何帮助

Peter

两个问题：

1. 如果您使用“controller as”语法，则需要为要访问的内容添加前缀（在您的情况下，您需要kendo-grid="vm.grid"代替kendo-grid="grid"
2. 当你的控制器实例化时，Kendo UI 小部件尚不存在（类似的问题here https://stackoverflow.com/a/28390385/2001735），所以你需要使用全局 Kendo 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";
        });
    }
})();

(更新了演示 http://jsfiddle.net/ocdhxxpv/3/)