Question

我对Angular有点新，并试图学习如何在没有使用Angular的jQuery的情况下使用Kendo Grid。我得到用于小部件配置的jQuery代码是用javascript编写的，但我没有得到HTML指令。

<kendo-grid options="mainGridOptions">

“选项”属性是什么意思？我假设它的属性是kendo-grid（由指令定义）小部件？但是当我去documentation时，我没有在字段下拉配置中看到它？

Answer 1

你应该像这样使用k-options ......

<kendo-grid k-options="mainGridOptions"></kendo-grid>

...然后在您的控制器范围内，您可以公开您的选项对象。

...    
$scope.mainGridOptions = {
   dataSource: {
      data: myData
   },
   height: 550
};
...

这是您引用选项对象的方式。

在基于jQuery的Kendo UI中，它会像这样传递给构造函数......

$('myGrid').kendoGrid({
   dataSource: {
      data: myData
   },
   height: 550
});

作为旁注，大多数（如果不是全部）配置选项可直接在带有k-前缀的指令上使用。

例如......

<kendo-grid
    k-data-source="myData"
    k-height="550"
></kendo-grid>

..然后你只需在控制器上公开你的数据......

...
$scope.myData
...

另一个注意事项是，如果你将指令用作这样的属性......

<div kendo-grid="myGrid"
    k-data-source="myData"
    k-height="550"
></div>

...您正在为其分配一个引用，允许您在控制器范围内访问小部件的Kendo对象。

...
$scope.myGrid.resize();
...

Answer 2

属性k-options可用于在控制器中存储整个窗口小部件配置。此属性也可用于其他Kendo组件，如调度程序，日期选择器等。

以下是使用k-options属性实现的Kendo datepicker的示例：

<div ng-app="app" ng-controller="MyCtrl">
    <input kendo-date-picker k-options="monthPickerConfig">
</div>

<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
    $scope.monthPickerConfig = {
      start  : "year",
      depth  : "year",
      format : "MMMM yyyy"
    };
});
</script>

具有角度的Kendo-Grid

2 个答案: