javascript - 为什么我收到错误参数未定义？

Question

在我的项目中，我使用 ui-grid 来过滤表格。

这里是 JavaScript 代码:

(function () {
    "use strict";

    angular.module("workPlan").controller("workPlanListController", ["workPlans",
        "clients",
        "inspectionAuthority",
        "$http",
        "config",
        "workPlanServise",
        workPlanListController
    ]);


    function workPlanListController(workPlans,
        clients,
        inspectionAuthority,
        $http,
        config,
        workPlanServise
    ) {
        var self = this;

        this.workPlanList = workPlans;
        this.lookups = {
            client: clients,
            authority: inspectionAuthority
        };

        this.gridOptions = {
            expandableRowTemplate: 'app/workPlan/templates/expandableRowTemplate.tmpl.html',
            expandableRowHeight: 150,
            enableColumnMenus: false,
            enableSorting: true,
            enableFiltering: false,
            enableToopTip: true,
            enableHorizontalScrollbar: 0,
            onRegisterApi: function (gridApi) {
                gridApi = gridApi,
                gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
                    if (row.isExpanded) {
                        row.entity.subGridOptions = {
                            enableColumnMenus: false,
                            enableSorting: true,
                            enableFiltering: false,
                            enableToopTip: true,
                            enableHorizontalScrollbar: 0,
                            columnDefs: [{ name: 'Frequency', field: 'inspectionFrequencyName', cellTooltip: true },
                                         { name: '# Sites', field: 'siteCount', cellTooltip: true },
                                         { name: 'Fixed Sites', field: 'normalSitesCount', cellTooltip: true }]
                        };
                        var arr = [];

                        workPlanServise.getSubGridContent(row.entity.clientId).then(function (result) {
                            row.entity.subGridOptions.data = result.data;

                            for (var i = 0; i < result.data.length ; i++) {
                                arr.push(
                                     {
                                         inspectionFrequencyName: row.entity[i].inspectionFrequencyName,
                                         items2inspect: row.entity[i].itemssiteCount2inspect,
                                         normalSitesCount: row.entity[i].normalSitesCount,
                                     });
                            }
                            row.entity.subGridOptions.data = arr;
                        });
                    }
                });
            }
        }

        this.gridOptions.columnDefs = [
        { name: 'Client', field: 'clientName', cellTooltip: true, headerTooltip: true },
        { name: '# Sites', field: 'siteNumbers', cellTooltip: true, headerTooltip: true },
        { name: '#FixedSites', field: 'siteNumbersInspected', cellTooltip: true, headerTooltip: true }];

        this.gridOptions.data = self.workPlanList;


        this.filterByClient = function () {
            gridApi.grid.refresh()
            singleFilter(self.gridApi.grid.rows, 'clientName', self.clientName);
        };


        this.singleFilter = function (renderableRows, field, filterValue) {
           var matcher = new RegExp(filterValue);
            renderableRows.forEach(function (row) {
               var match = false;

               if (row.entity[field].match(matcher)) { match = true; }

               if (!match) {
                   row.visible = false;
               }
           });
            return renderableRows;
        };
    }
})();

View :

<div class="panel panel-default">
    <div class="panel-heading">
        <h4>work plan</h4>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="input-group">
            <input type="text" class="form-control" placeholder="Filter by client...">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ng-click='list.filterByClient()'>
                        <i class="glyphicon glyphicon-filter"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div ui-grid="list.gridOptions" dir="rtl" ui-grid-expandable ui-grid-resize-columns class="grid"></div>

</div>

当我在 View 中按“过滤器”时，此函数已被调用:

    this.filterByClient = function () {
        gridApi.grid.refresh()
        singleFilter(self.gridApi.grid.rows, 'clientName', self.clientName);
    };

在这一行中:

gridApi.grid.refresh()

我得到这个:错误:

Cannot read property grid of undefined

虽然在这个类似example效果很好。

知道为什么我会收到上面的错误吗？

Answer 1

您必须将 gridApi 注入(inject)范围，如示例所示:

onRegisterApi: function(gridApi){
  $scope.gridApi = gridApi;
  // [...]
},

然后您可以通过以下方式引用它:

$scope.gridApi.grid.refresh();

在您的情况下，只需将 $scope 更改为 this