Question

我使用AngularJS版本1.2.27的Kendo UI版本2014.2.716，并使用指令制作了网格

<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 =＆＃34; myGridOnScope＆＃34;），你就可以这样访问控制器范围内的小部件：

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

console.log应该记录一个widget对象，但在我的情况下它是未定义的。我究竟做错了什么？谢谢你的帮助

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

这是因为当您尝试设置选项时，角度太快并且不存在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);
        }
    });

这是否回答了你的问题？

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

3 个答案: