javascript - Angular UI-Grid TypeError : Cannot set property 'data' of undefined. 发送来自服务的 promise 和未定义的数据

Question

我正在探索 Angular.js UI-Grid。但是，当我在我的服务中发出 HTTP 请求时，我似乎无法弄清楚为什么数据未定义。当我从我的 Controller 发出 HTTP 请求时，它似乎工作正常。如何使 Ui-Grid 以模块化方式工作？

HTML

<div id="grid1" ui-grid="gridOptions" class="grid"></div>

Controller

app.controller('tableCtrl', function($scope, tableService) {

    var getAllArtistData = function() {

        tableService.getArtistData().then(function(data) {
            console.log("this is controller data", data);
            $scope.gridOptions.data = data;

            $scope.gridOptions = {};

            $scope.gridOptions.columnDefs = [
                {name:'artist_id'},
                {name:'first_name'}
            ];

            });
        };
    getAllArtistData();
});

服务

app.service('tableService', function($http, $q) {

    /************************************************
    GET ARTIST DATA 
    ************************************************/
    this.getArtistData = function() {

        var defer = $q.defer();

        $http.get('../../../data/artists-lite.json')
            .success(function(response) {
                console.log("this is response", response);
                defer.resolve(response);
            })
            .error(function(err) {
                defer.reject(err);
            });

        return defer.promise;

    };
});

App.js

'use strict';

var app = angular.module('bucketfeet', ['ui.router','ui.grid', 'ngAnimate']);

app.run(function($state, $rootScope) {
    $rootScope.$state = $state;
});

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider
    .otherwise('/');

    $stateProvider
    .state('stats', 
        {
            url: '/stats',
            templateUrl: './js/views/statsTmpl.html'
        })
    .state('table', 
        {
            url: '/table',
            templateUrl: './js/views/tableTmpl.html',
            controller: 'tableCtrl'
        });

});

Answer 1

在你的 Controller 中你应该在使用它之前初始化你的gridOptions。更好的是，尝试将此变量的设置提取到 Controller 范围，只留下异步方法中的数据:

app.controller('tableCtrl', function($scope, tableService) {

    // Initialize gridOptions with all the properties, except for data
    $scope.gridOptions = {};
    $scope.gridOptions.columnDefs = [
        {name:'artist_id'},
        {name:'first_name'}
    ];
    $scope.gridOptions.data = [];

    var getAllArtistData = function() {

        tableService.getArtistData().then(function(data) {
            console.log("this is controller data", data);

            // fill only data in asynchronous callback
            $scope.gridOptions.data = data;
        });
    };
    getAllArtistData();
});

方法 tableService.getArtistData() 异步执行，此方法的回调仅在从服务器检索数据时执行。这可能在几毫秒内发生，也可能在几分钟内发生。网格的渲染需要在回调执行之前发生，缺少如何渲染网格的元数据信息。这就是为什么我建议在启动异步调用之前初始化网格元数据，并且在回调中仅设置数据。