$ scope.uiGrid未定义

acc*_*sio 4 javascript angularjs mean-stack angular-ui-grid

我正在尝试使用angularjs ui-grid创建一个表,但我不断被告知$ 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}
            ]
        };
    }
);
}]);
Run Code Online (Sandbox Code Playgroud)

console.log(obj.businesses[0].name)将把正确的数据放到控制台上,这对obj变量来说不是问题.代码只有在进入gridOptions时才会中断.

Nic*_*ght 6

我不知道ui-grid是如何工作的确切细节.但我猜测ui-grid指令会立即$scope.gridOptions提供$scope.但是,$scope.gridOptions只有在异步 http请求完成加载后才进行分配.

$scope.gridOptions在执行http请求之前,您应该尝试立即提供空(或充分准备好).

或者,通过在同一元素上添加额外的指令,可以延迟任何指令的链接ng-if.设置如下:

ng-if='whenHttpRequestHasFinishedLoading'

并且在success()功能内部设置$scope.whenHttpRequestHasFinishedLoading = true