如何在angularjs中使用ui-grid為多個表動態創建網格選項

Question

我已經為ui-grid表編寫了一項服務。 現在，我只能在一個頁面中使用此服務，但是，我想在具有不同表數據的多個頁面中使用此服務。 如何傳遞多個表的網格選項和json數據。 我該怎么做？ 請幫助任何人。

服務：

(function(){
"use strict"; 
angular.module('nApp').controller('SearchResultsController', ['$scope', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', function ($scope, $http, $timeout, $interval, uiGridConstants, uiGridGroupingConstants) {
    var searchResults = this;
    searchResults.loadPOHeaderView = loadPOHeaderView;
    //searchResults.loadPOLinesView = loadPOLinesView;

    function loadPOHeaderView() {
        if(dataFactory.getSelectedPOHeader().length) {
            $state.go("^.poheader");
        };
    }

    $scope.gridOptions = {
    enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
    enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER,
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 10,
    useExternalPagination: true,
    useExternalSorting: true,
    enableRowSelection: false,
    enableCellSelection: false,
    enableFiltering: false,
    enableCellEdit: false,
    enableColumnResizing: true,
    enableColumnMenus: false,
    enableGridMenu: false,
    showGridFooter: false,
    showColumnFooter: false,
    fastWatch: true,
    enablePaging: true,
    showFilter: true,
    rowHeight: 45,
    onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
            if (sortColumns.length == 0) {
                paginationOptions.sort = null;
            } else {
                paginationOptions.sort = sortColumns[0].sort.direction;
            }
                getPage();
        });
        gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
            paginationOptions.pageNumber = newPage;
            paginationOptions.pageSize = pageSize;
            getPage();
        });
    },
    columnDefs : [
    { name:'Test1', displayName:'Test1'},
    { name:'Test2', displayName:'Test2'},
    { name:'Test3', displayName:'Test3'},
    { name:'Test4', displayName:'Test4'},
    { name:'Test5', displayName:'Test5'},
    { name:'Test6', displayName:'Test6'},
    { name:'Test7', displayName:'Test7'}     
    ]
    }; 
      var paginationOptions = {
    pageNumber: 1,
    pageSize: 10,
    sort: null
    }; 
      var getPage = function() {
var url;
switch(paginationOptions.sort) {
  case uiGridConstants.ASC:
    url = 'common/service/pogriddata.json';
    break;
  case uiGridConstants.DESC:
    url = 'common/service/pogriddata.json';
    break;
  default:
    url = 'common/service/pogriddata.json?page='+paginationOptions.pageNumber;
    break;
}

$http.get(url)
.success(function (data) {
  $scope.gridOptions.totalItems = 30;
  var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
  $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
   }); }; getPage();  }]);})();

查看頁面：

<div ng-controller="SearchResultsController" class="col-md-12">
<div  ui-grid="gridOptions"  ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-move-columns ui-grid-importer ui-grid-exporter ui-grid-pagination class="grid"></div>
</div>

Answer 1

 app.directive('gridWrapper', ['$http',function ($http) { return { restrict: 'EA', scope:{ enableFilter:'@', enableSorting:'@', enableColResize:'@', ngModel: '=', getHeader: '=', getData: '=', }, template:'<div ag-grid="gridOptions" class="ag-fresh" id="gridView" ></div>', controller:function($scope){ $scope.gridOptions = { columnDefs: $scope.getHeader, rowSelection: 'single', rowData: $scope.getData, enableFilter: $scope.enableFilter, enableSorting: $scope.enableSorting, enableColResize: $scope.enableColResize }; } }; }]); 

 <grid-Wrapper enable-Filter="{{true}}" enable-Sorting="{{true}}" enable-Col-Resize={{true}} ng-model="model" get-header="gridheader" get-data="rowData" ></grid-Wrapper> <grid-Wrapper enable-Filter="{{false}}" enable-Sorting="{{false}}" enable-Col-Resize={{false}} ng-model="model1" get-header="gridheader1" get-data="rowData1" ></grid-Wrapper>