ngGrid不显示数据

Question

我创建了一个指令来显示我的网格如下：

这是小部件模块

 (function() {
    angular.module("Widgets", []);
}());

这是应用程序模块

    (function () {
    var app = angular.module("productManagement",
        ["common.services", "ui.router", "ui.mask", "ui.bootstrap","ngGrid", "Widgets", "productResourceMock"]);
    (function () {
    var app = angular.module("productManagement",
        ["common.services", "ui.router", "ui.mask", "ui.bootstrap",**"ngGrid"**, **"Widgets"**, "productResourceMock"]);
}());

这是控制器

(function () {
angular.module("productManagement")
    .controller("ProductController",
    ["productResource", "ProductService",
    productListController]);
function productListController(productResource, $scope, productService) {
    var vm = this;

    vm.testData = [
        { imageUrl: "test", productName: "test", productCode: "1222", releaseDate: "12", price: "344" },
         { imageUrl: "test", productName: "test", productCode: "1222", releaseDate: "12", price: "344" }
    ];

    vm.columnDefs = [
        { field: 'imageUrl', displayName: 'Image' },
         { field: 'productName', displayName: 'Product Name' },
          { field: 'productCode', displayName: 'Product Code' },
           { field: 'releaseData', displayName: 'Date' },
        { field: 'price', displayName: 'Unit Price' }
    ];

    vm.productList = function () {

    };
    productResource.query(function (data) {
        vm.products = data;
    });

    vm.showImage = false;
    vm.toggleImage = function () {
        vm.showImage = !vm.showImage;
    };

};}());

这是小部件指令

angular.module('Widgets').directive('gridwidget', function ($compile) {

return {
    restrict: 'E',
    template: '<div class="gridStyle" ng-grid="options"></div>',
    scope: {},
    compile: function(cElem, cAttrs) {
        return {
            pre: function(scope, iElement, iAttrs) {
                scope.options = {};
                scope.options.columnDefs = scope.$parent.$eval(iAttrs.cols);

                scope.options.data = scope.$parent.$eval(iAttrs.tableData); //iAttrs.tableData;
                //scope[iAttrs.tableData] = scope.$parent.$eval(iAttrs.tableData);

                scope.options.showGroupPanel = true;
                scope.options.showSelectionCheckbox = true;
                scope.options.showColumnMenu = true;
                scope.options.showFilter = true;
                scope.options.enablePaging = true;
                scope.options.showFooter = true;
                console.log(scope.options);
                scope.$parent.$watch(iAttrs.tableData, function(value) {
                    var val = value || null;
                    if (val) {
                        scope[iAttrs.tableData] = scope.$parent.$eval(iAttrs.tableData);
                    }
                });

            }
        };
    }
};});

在索引HTML页面中，我引用了以下内容：

  <script src="scripts/angular.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/angular-mocks.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<script src="scripts/angular-ui/ui-utils.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/ng-grid.js"></script>
 <script src="app/products/widgetsModule.js"></script>
<script src="app/products/gridWidget.js"></script>
 <script src="app/products/ProductController.js"></script>

“产品列表”视图显示网格

  <gridwidget table-data="vm.testData" cols="vm.columnDefs"></gridwidget> 

我面临的问题是网格显示在产品列表视图页面上，总项目数显示正确的记录数，但网格上没有显示数据。 有谁知道这里的问题是什么？ 欢呼声。