Kendo UI 和 Angular - $scope 中没有小部件

Question

我正在使用 Kendo UI 版本 2014.2.716 和 AngularJS 版本 1.2.27，我使用指令制作了一个网格

<div ng-controller="MyController as ctrl">
    <div id="myGrid" kendo-grid k-options="{some options}"></div>
    <button ng-click="ctrl.doSomething()"></div>
</div>

我了解到，如果您为网格命名（例如：kendo-grid="myGridOnScope"），您可以通过以下方式访问控制器范围内的小部件：

myModule.controller('MyController', function($scope) {
   this.doSomething = function() {
       console.log($scope.myGridOnScope);
   }
}

console.log 应该记录一个小部件对象，但在我的例子中它是未定义的。我究竟做错了什么？感谢您的帮助

Answer 1

我自己发现了问题，所以如果有人有同样的问题，我会发布一个答案。如果你在 AngularJS 中使用 controllerAs 语法，你不能只写小部件的名称 - 你必须在它前面加上你的控制器别名。

看看这个例子：

<div ng-controller="MyController as ctrl">
    <div kendo-grid="myGridName"></div>
</div>

这不会为您提供$scope 上的网格对象 - 为此您需要添加ctrl 前缀：

<div ng-controller="MyController as ctrl">
    <div kendo-grid="ctrl.myGridName"></div>
</div>

现在您可以像这样访问控制器中的小部件：

angular.module('MyModule',['kendo.directives'])
    .controller('MyController', function($scope){
        // this gives you the widget object
        console.log(this.myGridName);

        // however, this doesn't work
        console.log($scope.myGridName);
});

我希望我对这篇文章有所帮助。 干杯，

Answer 2

尝试等待 Kendo 发出的事件。

HTML

<div kendo-grid="grid" options="gridOptions"></div>

Javascript

$scope.$on("kendoWidgetCreated", function(event, widget){
    if (widget === $scope.grid) {
        console.log($scope.grid);
    }
});

编辑： See this Plunker

Answer 3

这是因为 angular 太快了，当您尝试设置选项时，kendo 元素不存在。

我用手表解决了这个问题。

这是我的html代码：

<div kendo-grid="ListDesign"></div>

这是我的角度代码

 $scope.$watch('ListDesign', function () {
        if ($scope.ListDesign != undefined) {
            var gridOptions = {
                columns: columns,
                sortable: {
                    mode: 'multiple',
                    allowUnsort: true
                }
            };
            $scope.ListDesign.setOptions(gridOptions);
            $scope.ListDesign.setDataSource(dataSource);
        }
    });

这是否回答了您的问题？