$scope.uiGrid 未定义

Question

我正在尝试使用 angularjs ui-grid 创建一个 table 但我一直被告知 $scope.uiGrid 未定义，谁能告诉我是什么我做错了吗？

    requestYelp.success(
    function(obj) 
    {
        console.log(obj.businesses[0].name);

        $scope.gridOptions = {
            enableSorting: true,
            rowHeight:100,
            columnDefs: [
            { field: 'name' },
            { field: 'company'  },
            { field: 'image', cellTemplate:"<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>"}
            ],

            data:[
            {name:obj.businesses[0].name,company: "Company1", image: obj.businesses[0].image_url},
            {name:obj.businesses[1].name,company:"Company2",image:obj.businesses[1].image_url},
            {name:obj.businesses[2].name,company:"Company3",image:obj.businesses[2].image_url}
            ]
        };
    }
);
}]);

console.log(obj.businesses[0].name) 会将正确的数据放到控制台，所以这不是 obj 变量的问题。代码仅在到达 gridOptions 时中断。

Answer 1

我不知道 ui-grid 工作原理的具体细节。但我猜测 ui-grid 指令立即期望 $scope.gridOptions 在 $scope 上可用。但是，您仅在异步 http 请求完成加载后才分配 $scope.gridOptions。

您应该尝试在执行 http 请求之前立即提供一个空的（或充分准备好的）$scope.gridOptions。

或者，有一个技巧可以通过在同一元素上添加额外的 ng-if 来延迟 any 指令的链接。像这样设置它：

ng-if='whenHttpRequestHasFinishedLoading'

并且在 success() 函数中设置 $scope.whenHttpRequestHasFinishedLoading = true

Answer 2

我知道这不能回答 OP 的问题，但这是 Google 的第一个匹配项，当您搜索 "ui-grid $scope.uiGrid undefined".

时

当我弄清楚我错过了什么时，我觉得自己像个彻头彻尾的白痴，但如果其他人遇到同样的问题，请确保您的 ui-grid 指令值...

    <div ui-grid="gridOptions"></div>

...匹配您的选项对象的名称：

    $scope.gridOptions = {};

$scope.uiGrid 未定义

$scope.uiGrid is undefined

javascript

angularjs

mean-stack

angular-ui-grid