Kendo UI 和 angular - $scope 中没有小部件 [英] Kendo UI and angular - no widget in $scope

问题描述

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

<div id="myGrid" kendo-grid k-options="{一些选项}"></div><button ng-click="ctrl.doSomething()"></div>

我读到如果您为网格命名(例如:kendo-grid="myGridOnScope")，您可以通过这种方式访问​​控制器范围内的小部件:

myModule.controller('MyController', function($scope) {this.doSomething = 函数(){控制台日志($scope.myGridOnScope)；}}

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

解决方案

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

看看这个例子:

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

这不会给你 $scope 上的网格对象 - 为此你需要添加 ctrl 前缀:

<div kendo-grid="ctrl.myGridName"></div>

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

angular.module('MyModule',['kendo.directives']).controller('MyController', function($scope){//这给了你小部件对象console.log(this.myGridName);//然而，这不起作用console.log($scope.myGridName);});

我希望我通过这篇文章帮助了某人.干杯，

I'm using Kendo UI version 2014.2.716 with AngularJS version 1.2.27, and I made a grid using a directive

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

I read that if you give a name to the grid (like this: kendo-grid="myGridOnScope"), you can access the widget in the controller scope in this way:

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

The console.log should log a widget object, but in my case it's undefined. What am I doing wrong? Thanks for the help

解决方案

I have found out the problem myself, so I'm going to post an answer if someone has the same problem. If you use the controllerAs syntax in AngularJS, you can't just write the name of the widget - you have to prefix it with your controller alias.

Take a look at this example:

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

This will not give you the grid object on the $scope - for that you need to add the ctrl prefix:

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

Now you have access to the widget in your controller like this:

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

I hope I helped someone with this post. Cheers,

这篇关于Kendo UI 和 angular - $scope 中没有小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！