javascript - $scope.uiGrid is undefined - Stack Overflow

admin管理员组

文章数量:1317572

I'm trying to create a table using angularjs ui-grid but I keep getting told that $scope.uiGrid is undefined, can anyone tell me what I'm doing wrong?

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

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

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

console.log(obj.businesses[0].name) will put the right data to the console so it's not a problem with the obj variable. The code only breaks when it gets to gridOptions.

I'm trying to create a table using angularjs ui-grid but I keep getting told that $scope.uiGrid is undefined, can anyone tell me what I'm doing wrong?

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

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

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

console.log(obj.businesses[0].name) will put the right data to the console so it's not a problem with the obj variable. The code only breaks when it gets to gridOptions.

• javascript
• angularjs
• mean-stack
• angular-ui-grid

Share Improve this question Follow asked Jan 16, 2016 at 20:38 accasioaccasio 18511 gold badge33 silver badges1212 bronze badges 1

• The rest of the code, if needed – accasio Commented Jan 16, 2016 at 20:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I don't know the exact details how the ui-grid works. But I'm guessing that the ui-grid directive immediately expects $scope.gridOptions to be available on the $scope. However, you are assigning $scope.gridOptions only after the asynchronous http request has finished loading.

You should try to provide an empty (or adequately primed) $scope.gridOptions immediately before doing the http request.

Alternatively there's a trick to delay linking of any directive by adding an additional ng-if on the same element. Set it up something like this:

ng-if='whenHttpRequestHasFinishedLoading'

And inside the success() function just set $scope.whenHttpRequestHasFinishedLoading = true

I know this doesn't answer the OP's question, but this is the first hit from Google, when you search for "ui-grid $scope.uiGrid undefined".

I felt like a plete idiot when I figured out what I'd missed, but in case anyone else runs into the same issue, make sure your ui-grid directive value...

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

...matches the name of your options object:

    $scope.gridOptions = {};

本文标签： javascriptscopeuiGrid is undefinedStack Overflow