javascript - 剣道データソースに angular スコープ変数を与える

Question

現在、剣道グリッドにリモートデータを入力しようとしています。剣道にはデータを取得する独自の機能がありますが、私が作成した angular factory を使用したいと考えています。

したがって、「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 コールバックは剣道グリッドの初期化よりも遅くなります。次に、テーブルのデータが angular $scope.skills 変数にバインドされていないため、空のテーブルが表示されます。

どこでも検索しましたが、初期化でデータ属性にカスタム関数を使用する方法や、スコープ変数をテーブルにバインドする方法がわかりません。

どんな助けでも大歓迎です！

score 7 · Accepted Answer

少し簡単な解決策を見つけました。私の場合、$scope.regs は、「AppService」で公開された Angular $resource を使用してサーバー REST サービスから更新されるデータを定義します。このサービスは次のように定義されています。

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

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

HTML のグリッド定義に k-auto-bind = "false" を設定します。

<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>

「データ」プロパティを使用して Kendo グリッドデータソースをバインドする代わりに、関数として「読み取り」を定義した「トランスポート」を使用しました。

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

次に、グリッド内のデータを更新する場合は、Angular $resource を使用してコールバックを使用します。:

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

できます。このソリューションの追加の利点は、グリッドの作成を Java Script コードに移動する必要がなく、HTML のままでよいことです。

score 6 · Accepted Answer

このような何かがあなたを正しい道に導きます。transport read メソッドでファクトリを簡単に呼び出すことができます。それらを組み合わせて一致させることはできません。すべての読み取り、作成、および破棄メソッドがファクトリを使用する必要があるか、すべてがエンドポイント、つまり 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");
        }

    }

});

score 0 · Accepted Answer

私はこれを次のように修正しました：

リソース関数に次のようなコールバックを与えました。

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
       },

したがって、初期化のデータ属性で、データが正常にフェッチされたときにデータを設定します。これが役立つことを願っています！

javascript - 剣道データソースに angular スコープ変数を与える

4 に答える 4

Related

Reference