6

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

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

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

在我的 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 回调比初始化剑道网格要慢。然后它将显示一个空表，因为表的数据未绑定到角度 $scope.skills 变量。

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

任何帮助，将不胜感激！

4

4 回答 4

7

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

    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. 我没有使用“数据”属性绑定剑道网格数据源，而是使用“传输”和“读取”定义为函数，如下所示：

      $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 中。

于 2013-12-17T22:43:43.957 回答
6

这样的事情会让你走上正确的道路。您可以在传输读取方法中简单地调用您的工厂。你不能混合和匹配它们，你所有的读取、创建和销毁方法都必须使用工厂，或者它们都必须显式调用端点，即 url: '/api/myservice/' 而不是使用 $http就像在您的应用程序中的任何其他地方一样使用您的工厂：

$scope.Source = new kendo.data.DataSource({

    transport: {

        read: function (options) {

            return $http.post('/api/getReportData/', {sDate: '', eDate: ''})
                .success(function (data) {

                    options.success(data);
                    Toaster.Info("Refreshed");

                })
                .error(function () {
                    return;
                });

            console.log("mmm");
        }

    }

});
于 2014-08-05T15:18:05.247 回答
0

我通过以下方式解决了这个问题：

我给了我的资源函数一个这样的回调：

SkillFactory.getSkills({},
    function success(data) {
        createGrid(data);
    });

在函数 createGrid(data); 我像这样初始化数据：

 function createGrid(gridData) {
$("#skillGrid").kendoGrid({
   dataSource: {
   data: gridData,
   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
       },

所以在初始化的数据属性中，我设置了成功获取数据时的数据。我希望这有帮助！

于 2013-10-10T09:00:59.220 回答
-2

你看过$q Angular中的Promise吗？查看Angular 中的 $q 承诺

于 2014-07-16T20:42:47.120 回答