AngularJS UI ng-grid不绘制内容文本＆amp;在指令内部使用时为空

Question

我正在开发一个SearchAndSelect控件（AngularJS指令），它包含它自己的ng-grid，滑块页面。一切正常，数据被提取，行数到达网格，但网格没有显示文本。

SearchAndSelectDirective.js

App.directive('searchAndSelect',
    function () {
        return {
            restrict: 'E',
            templateUrl: "/app/directives/searchAndSelect.html",
            controller: "searchAndSelectController",
            transclude: false,
            scope: {
                currentNode: '='
            }, 
            compile: function() {
               // return true;
            }
        };
    }
);

SearchAndSelect.html

<button class="btn" ng-click="openSliderPage()">Add/Remove {{EntityName}}</button>

<div id="divSlide" class="sliderDiv">
    <div class="sliderHeader" ng-model="partialPageHeading">
        <span class="sliderHeaderLabelOriginal">{{partialPageHeading}}</span>

    </div>

    <div>
        <div class="gridStyle" ng-grid="gridOptions"></div>

        <div class="modal-footer">
            <input ng-model="filterOptions.filterText" />
            <button class="btn btn-info" ng-click="getPagedDataAsync()">Filter</button>
            <button class="btn btn-primary" ng-click="add()">Update</button>
            <button class="btn btn-warning" ng-click="cancnel()">Cancel</button>
        </div>
    </div>

    <!--<ng-include src="svcSliderView"></ng-include>-->
</div>

它拥有自己的控制器，以异步方式获取数据。在网格中生成的行数，网格是可见的。我在控制器内部有代码来标记选中的某些行，并且它正在发生。但只有内容没有显示。如果我看到浏览器的元素探索，我可以看到数据存在。

SearchAndSelectController.js

   $scope.filterOptions = {
            filterText: "",
            useExternalFilter: false
        };
        $scope.pagingOptions = {
            pageSizes: [50, 100, 200],
            pageSize: 50,
            currentPage: 1
        };
        $scope.getVehListParams = function () {
            var params = { PageNo: $scope.pagingOptions.currentPage, PageSize: $scope.pagingOptions.pageSize };
            params.CalculateTotal = false;
            if (!$scope.totalCount) {
                params.CalculateTotal = true;
            }
            params.FilterText = '';
            if ($scope.filterOptions.filterText) {
                params.FilterText = $scope.filterOptions.filterText;
            }
            return params;
        };
        $scope.getPagedDataAsync = function () {
            var vehListGetParams = $scope.getVehListParams();
          seVehicleResource.get(vehListGetParams,
                function (result) {
                    $scope.dataList = result.DataList;

                    if (result.TotalCount || result.TotalCount == 0) {
                        $scope.totalCount = result.TotalCount;
                    }
                    //mark already added rows in left as selected.
                    $timeout(function () {
                        if ($scope.planSelected) {
                            _.each($scope.planSelected.Vehicles, function (vehicle) {
                                var vIdx = $.map(result.DataList, function (obj, index) {
                                    if (obj.VehicleId == vehicle.VehicleId) {
                                        return index;
                                    }
                                    return null;
                                });
                                if (vIdx && vIdx.length > 0) {
                                    $scope.vehicleExisted.push(result.DataList[vIdx[0]]);
                                    $scope.gridOptions.selectItem(vIdx[0], true);
                                }
                            });
                        }

                    });

                }, function (error) {
                    console.log(error);
                });

        };
        $scope.$watch('pagingOptions', function (newVal, oldVal) {
            if (newVal !== oldVal && (newVal.currentPage !== oldVal.currentPage || newVal.pageSize !== oldVal.pageSize)) {
                $scope.getPagedDataAsync();
            }
        }, true);


        $scope.allSelected = false;
        $scope.gridOptions = {
            data: 'dataList',
            enablePaging: true,
            showFooter: true,
            showFilter: true,
            columnDefs: [{ field: 'Make', displayName: 'Make', width: '35%' }, { field: 'Model', displayName: 'Model', width: '35%' }, { field: 'BeginYear', displayName: 'Begin Year', width: '15%' }, { field: 'EndYear', displayName: 'End Year', width: '15%' }],
            totalServerItems: 'totalCount',
            pagingOptions: $scope.pagingOptions,
            filterOptions: $scope.filterOptions.filterText,
            showSelectionCheckbox: true,
            afterSelectionChange: $scope.afterSelectionChange,
        };

Answer 1

我在下面的div中使用了这个指令，它使其fontsize为0，删除了这个容器网格，解决了我的问题。 全部谢谢

<div class="btn-group">