javascript - 给剑道数据源一个 Angular 范围变量

Question

我目前正在尝试用远程数据填充剑道网格。 Kendo 有自己的函数来获取数据，但我想使用我创建的 Angular 工厂。

所以我有一个工厂，它有一个函数“getSkills”。此函数从我的 api 获取所有技能对象。

angular.module('MyApp').factory('Factory', function ($resource) {
    return $resource('/api/v1/skills/', {  },
        {
            getSkills: { method: 'GET', isArray: true }
        });
});    

在我的 angular SkillController 中，我将这些获取的技能放在一个范围变量中。

$scope.skills = SkillFactory.getSkills();

我在这里初始化剑道网格:

$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" }
                ]
            };

大多数时候，ajax 回调比 kendo 网格的初始化慢。然后它将显示一个空表，因为表的数据未绑定(bind)到 Angular $scope.skills 变量。

我到处搜索，但我无法弄清楚如何在初始化中为数据属性使用自定义函数，或者如何将范围变量绑定(bind)到表。

如有任何帮助，我们将不胜感激!

Answer 1

我找到了一个更简单的解决方案: 在我的例子中，$scope.regs 定义了使用 Angular 从服务器 REST 服务更新的数据 $resource 使用“AppService”公开。此服务定义为:

    var registrationServices = angular.module('registrationServices', ['ngResource']);

    registrationServices.factory('AppService', ['$resource',
        function($resource) {
            return $resource('rest/registrations');
    }]);

1. 我将 k-auto-bind = "false"设置为 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>
   

2. 我没有使用“data”属性绑定(bind) Kendo 网格数据源，而是使用“transport”和“read”定义为函数，类似这样:

     $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"}
       }
   ];
       ....
   

3. 然后，当我想刷新网格中的数据时，我使用 Angular $resource 进行回调。 :

   $scope.doSearch = function() {
       $scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) {
           $scope.registrations.read();
       });
   };
   

它有效。 此解决方案的另一个优点是，您不必将网格创建移动到 Java Script 代码，它可以保留在 HTML 中。