给剑道数据源的角度范围变量 [英] Give kendo datasource an angular scope variable
问题描述
目前，我正在试图填补与远程数据的剑道网格。
剑道有它自己的功能来获取数据，但我想用角的工厂，我创建的。
所以我有一个工厂，其中有一个功能getSkills。此函数从我的API的所有技能对象。
angular.module（'MyApp的'）。工厂（'工厂'，函数（$资源）{
返回$资源（'/ API / V1 /技能/'，{}，
{
getSkills：{方法：GET，IsArray的：真正}
}）;
}）;
在我的角度SkillController，我把这些牵强技能，在一个范围的变量。
$ scope.skills = SkillFactory.getSkills（）;
我在这里初始化剑道格：
$ scope.gridOptions = {
数据源： {
数据：$ scope.skills，
模式：{
型号：{
字段：{
ID：{类型：数字}，
名称：{类型：串}，
CreatedBy：{类型：数字}，
CreatedDate：{类型：串}，
EditedBy：{类型：数字}，
EditedDate：{类型：串}，
INUSE：{类型：布尔}
}
}
}，
每页：20
}，
滚动：真实，
排序：真实，
过滤：真实，
分页：{
输入：真实，
数字：假的
}，
可选：真实，
列： [
{场：姓名，标题：skillname宽度130px}
]
};
大部分的时间，Ajax回调比剑道网格的初始化速度较慢。然后它会显示一个空表，因为表中的数据不结合至角$ scope.skills变量
我已经搜索无处不在，但我想不通我怎么能在初始化使用自定义函数的数据属性，或如何范围变量绑定表中。
任何帮助将是AP preciated！
我发现了一点简单的解决方案：
在我的情况$ scope.regs定义了从服务器REST服务采用了棱角分明更新的数据
以AppService服务曝$资源。这个服务被定义为：
VAR registrationServices = angular.module（'registrationServices'，['ngResource']）; registrationServices.factory（AppService服务'，['$资源'，
功能（$资源）{
返回$资源（'休息/注册'）;
}]）;
-
我设置K-自动绑定=假在HTML电网定义：
＆LT; DIV ID =表单项＆GT;
＆LT;标签=APPID级=信息＆GT;的AppId：LT; /标签＆gt;
＆LT;输入ID =APPIDNG模型=searchAppId＆GT;
＆LT;按钮ID =搜索级=K键NG点击=doSearch（）＆GT;搜索和LT; /按钮＆GT;
＆LT; / DIV＆GT;＆LT; DIV剑道网K-数据源=注册K-选择=行
K-分页='{刷新：真实的页面大小：真正}
K-列=registrationsColumns
K-排序=真正的K-groupable =真正的K-过滤=真
K-ON-变化=将selectedItem =数据
K-自动绑定=false的＆GT;
＆LT; / DIV＆GT; -
而不是使用数据属性绑定剑道电网数据源，我用传输与读定义为功能，这样的事情：
$ scope.regs; $ scope.registrations =新kendo.data.DataSource（{
运输： {
阅读：功能（选件）{
options.success（$ scope.regs）;
}
}，
模式：{
型号：{
字段：{
registrationId：{类型：数字}，
clientFullName：{类型：串}，
registrationDate2：{类型：数字}，
registrationDate：{类型：日期}
}
}
}，
每页：5，
serverPaging：真实，
serverFiltering：真实，
serverSorting：真
}）;
$ scope.registrationsColumns = [{场：registrationId，称号：ID}，
{场：clientFullName，称号：姓名}，
{场：registrationDate
头衔：注册日期
格式为：{0：DD / MM / YYYY}，
过滤：{UI：dateFilter，多余的：假}
}
];
.... -
然后，当我想在网格中刷新数据，我用的采用了棱角分明$资源回调。
$ scope.doSearch =功能（）{
$ scope.regs = AppService.query（{REGID：$ scope.searchAppId}，功能（结果）{
$ scope.registrations.read（）;
}）;
};
它的工作原理。
这种解决方案的另一个优点是，你不必电网创作转向Java脚本code，它可以留在HTML
I'm currently trying to fill a kendo grid with remote data. Kendo has its own function to fetch the data, but I want to use the angular factory which I created.
So I have a factory, which has a function "getSkills". This function obtains all the skill objects from my api.
angular.module('MyApp').factory('Factory', function ($resource) {
return $resource('/api/v1/skills/', { },
{
getSkills: { method: 'GET', isArray: true }
});
});
In my SkillController in angular, I put these fetched skills in a scope variable.
$scope.skills = SkillFactory.getSkills();
I initialize the Kendo grid here:
$scope.gridOptions = {
dataSource: {
data: $scope.skills,
schema: {
model: {
fields: {
ID: { type: "number" },
Name: { type: "string" },
CreatedBy: { type: "number" },
CreatedDate: { type: "string" },
EditedBy: { type: "number" },
EditedDate: { type: "string" },
InUse: { type: "boolean" }
}
}
},
pageSize: 20
},
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
selectable: true,
columns: [
{ field: "Name", title: "skillname", width: "130px" }
]
};
Most of the times, the ajax callback is slower than the initialization of the kendo grid. Then it will show an empty table, because the data of the table isn't bound to the angular $scope.skills variable.
I have searched everywhere, but I can't figure out how I can use a custom function for the data attribute in the initialization, or how to bind the scope variable to the table.
Any help would be appreciated!
I found a little simpler solution: In my case $scope.regs defines the data which is updated from server REST service using Angular $resource exposed with "AppService". This service is defined as:
var registrationServices = angular.module('registrationServices', ['ngResource']);
registrationServices.factory('AppService', ['$resource',
function($resource) {
return $resource('rest/registrations');
}]);
I set k-auto-bind = "false" to grid definition in HTML:
<div id="form-item"> <label for="appId" class="info">AppId:</label> <input id="appId" ng-model="searchAppId"> <button id="search" class="k-button" ng-click="doSearch()" >Search</button> </div> <div kendo-grid k-data-source="registrations" k-selectable="'row'" k-pageable='{ "refresh": true, "pageSizes": true }' k-columns="registrationsColumns" k-sortable="true" k-groupable="true" k-filterable="true" k-on-change="selectedItem = data" k-auto-bind="false" > </div>Instead of binding Kendo grid datasource using "data" property, I used "transport" with "read" defined as function, something like that:
$scope.regs; $scope.registrations = new kendo.data.DataSource({ transport: { read: function(options) { options.success($scope.regs); } }, schema: { model: { fields: { registrationId: {type: "number"}, clientFullName: {type: "string"}, registrationDate2: {type: "number"}, registrationDate: {type: "date"} } } }, pageSize: 5, serverPaging: true, serverFiltering: true, serverSorting: true }); $scope.registrationsColumns = [{"field": "registrationId", "title": "Id"}, {"field": "clientFullName", "title": "Name"}, {"field": "registrationDate", "title": "Registration Date", format: "{0:dd/MM/yyyy}", filterable: {ui: dateFilter, extra: "false"} } ]; ....Then, when I want to refresh data in the grid, I use callback using Angular $resource. :
$scope.doSearch = function() { $scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) { $scope.registrations.read(); }); };
It works. Additional advantage of this solution is, you don't have to move grid creation to Java Script code, it can stay in HTML.
这篇关于给剑道数据源的角度范围变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
