我试图在我的 Angular 控制器中获取 Kendo 网格的实例,因此我可以尝试连接一些事件(并调用方法),我知道这可能不是最佳实践(并且可能应该使用自定义指令),但是根据文档 http://docs.telerik.com/kendo-ui/AngularJS/introduction,我们应该能够使用...
<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());
};
});
所以,我试图对网格做同样的事情。我有以下标记...
<div ng-controller="Grid">
<div kendo-grid='grid' k-options="vm.gridOptions"></div>
</div>
然后在控制器js文件中..
angular
.module("mygrid")
.controller("Grid", ['$scope', Grid]);
function Grid($scope) {
var gridInstance = $scope.grid;
...
可以看出here http://jsfiddle.net/peterjc/ocdhxxpv/2/
然而,gridInstance 始终是未定义的。有谁知道我是否应该能够使用网格来做到这一点,如果是的话为什么上面总是返回未定义?
预先感谢您的任何帮助
Peter
两个问题:
- 如果您使用“controller as”语法,则需要为要访问的内容添加前缀(在您的情况下,您需要
kendo-grid="vm.grid"
代替kendo-grid="grid"
- 当你的控制器实例化时,Kendo UI 小部件尚不存在(类似的问题here https://stackoverflow.com/a/28390385/2001735),所以你需要使用全局 Kendo UI 事件来等待它
所以你的 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>
您的应用程序:
(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";
});
}
})();
(更新了演示 http://jsfiddle.net/ocdhxxpv/3/)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)