4

ここで私の質問:

ng-table内部を使用する角度でディレクティブを構築しようとしています。問題は、ユーザーがボタンをクリックしたときに入力パラメーターtableDataがディレクティブの外側から設定されるため、最初は空の配列として初期化されることです。

だから私はに時計を追加し、変更tableData時にテーブルをリロードしようとしました。tableData

しかし、differ.resolve 関数は次の例外で終了します。

助けてください

ディレクティブの使用

<table-multiselect table-data="objectArray"></table-multiselect>

これは私の臨時雇用者です

TableMultiselect.tmpl.cshtml

<table ng-table="multiselect" class="table">
     <tr ng-repeat="feature in $data">
            <td data-title="'Id'" sortable="'id'">{{feature .id}}</td>
            <td data-title="'Name'" sortable="'name'">{{feature .name}}</td>
            <td data-title="'Type'" sortable="'type'">{{feature .type}}</td>
    </tr>
</table>

コントローラ

.directive('TableMultiselect', function (ngTableParams) {
    return {
        restrict: 'E',
        templateUrl: 'TableMultiselect.tmpl.cshtml',
        scope: {
            tableData: '='
        },
        controller: function ($scope) {

            var buildMultiSelectTable = function () {
                return new ngTableParams({
                    page: 1,
                    count: 10,
                    sorting: {
                        id: 'asc'
                    },
                    filter: {},

                }, {
                    counts: [10],
                    total: $scope.tableData.length, // length of data
                    getData: function ($defer, params) {
                        var data = $scope.tableData;
                        if (data.length <= 10) {
                            params.settings({ 'counts': [] });
                        }
                        params.total(data.length);
                        $defer.resolve(data);
                    }
                });
            };

            $scope.multiselect = buildMultiSelectTable();

            $scope.$watch('tableData', function (newValue, oldValue) {
                if ($scope.tableData != undefined && $scope.tableData.length > 0) {
                   $scope.multiselect.reload();
                }
            });
        },


    };
});

エラー

TypeError: Cannot set property '$data' of null
    at angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:3095
    at l.promise.then.J (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:101)
    at angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:102
    at h.a.$get.h.$eval (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:113)
    at h.a.$get.h.$digest (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:110)
    at h.a.$get.h.$apply (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:113)
    at m (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:72)
    at w (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:77)
    at XMLHttpRequest.B.onreadystatechange (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:79)
4

1 に答える 1

-1

貼り付けたコードから明らかな問題の 1 つは、ディレクティブ名を「TableMultiSelect」ではなく「tableMultiSelect」にする必要があることです。

app.directive('tableMultiselect', function (ngTableParams) {

完全なコードを見ずに推測するのが難しい他の問題があるかもしれないので、あなたの質問から私が理解したことに基づいた実用的な実装を次に示します: http://plnkr.co/edit/7MHhl6AKdfzajprfc0xK?p=preview

そして、これが実行時にオブジェクト配列がどのように変化するかです。

app.controller('AppCtrl',function($scope,$timeout){
    $scope.objectArray = [];

    $timeout(function(){
      $scope.objectArray.push({
        id: 1,
        name : "Abc",
        type : "type1"
      });
    },2000);

  });
于 2015-10-16T17:11:03.083 に答える