Kendo网格:以角度获取小部件实例

I was trying to get an instance of the Kendo grid within my Angular Controller, so I can try and hook up to some events (and call methods) I know this is probably not best practice (and should probably use a custom directive), but according to the documentation, we should be able to use...

我试图得到一个实例的剑道网格在我角控制器,这样我就可以试着连接到一些事件(和调用方法)我知道这可能不是最佳实践(应该使用一个自定义指令),但根据文档,我们应该能够使用…

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

});

So, I was trying to do the same with the grid. I have the following markup...

我试着对网格做同样的事情。我有以下标记……

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

and then in the controller js file..

然后在控制器js文件中。

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

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

as can be seen here

如图所示

However, gridInstance is always undefined. Does anyone know if I shoud be able to do this with the grid, and if so why the above always returns undefined?

然而，gridInstance一直是不明确的。有人知道我是否可以用网格来做这些吗?

Thanks in advance for any help

谢谢你的帮助

Peter

彼得

1 个解决方案

#1

Two issues:

两个问题:

If you use the "controller as" syntax, you need to prefix things you want to access (in your case, you need kendo-grid="vm.grid" instead of kendo-grid="grid"
如果使用“controller as”语法，则需要对要访问的内容进行前缀(在您的情况中，需要kendo-grid=“vm”)。电网”而不是kendo-grid = "网格"
When your controller is instantiated, the Kendo UI widget doesn't exist yet (similar question here), so you need to wait on it using a global Kendo UI event
当您的控制器被实例化时，Kendo UI小部件还不存在(类似的问题)，所以您需要使用一个全局Kendo UI事件来等待它。

So your Html becomes:

所以你的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>

Your app:

你的应用程序:

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

(更新演示)

1 个解决方案

#1

更多相关文章

随机推荐