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

尝试等待 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 2

因为angular速度太快，设置选项时kendo元素不存在。

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

这是我的 html 代码：

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

这是我的 angular 代码

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

这是否回答了您的问题？

Answer 3

我自己发现了这个问题，所以如果有人有同样的问题，我会post回答。如果你在 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);
});

我希望我在这方面对某人有所帮助 post。干杯，

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

Kendo UI and angular - no widget in $scope

kendo-ui

angularjs