Angularjs 通过自定义指令取消网格分页

在angular js中，我使用了

ng grid

。我想使用自定义指令管理

ng网格

分页。i、 e我想删除每页中重复的代码（代码下方）。因此，如何编写自定义指令来管理

ng网格

分页

//Configure Page Option
scope.pagingOptions = {
    pageSizes: [10, 20, 30, 500, 1000, 5000], //page Sizes
    pageSize: 10, //Size of Paging data
    currentPage: 1 //what page they are currently on
};
scope.gridOptions.pagingOptions = scope.pagingOptions;
scope.gridOptions.showFooter = true;
scope.gridOptions.enablePaging = true;
scope.gridOptions.totalServerItems = 'totalServerItems'; 

var data=scope.tableData

//设置分页监视方法 范围.$watch（'pagingOptions'，函数（）{ getPagedDataAsync（scope.paginOptions.pageSize， scope.pagingOptions.currentPage）；}，true）

}))

})

"严格使用",； var demoApp=角度模块（“demoApp”）

demoApp.controller（'SimpleControl'，函数（$scope）{

}))

//指示

demoApp.directive（'gridDataPager'，函数（）{

}))

//HTML

---

是否存在无法将

gridOptions

添加到服务的原因（如

值或
常量
）？否，我还想实现与寻呼机相关的操作。这是不可能实现value或constant的。您是否可以在问题中添加您试图重构的其他代码？
 var getPagedDataAsync = function (pageSize, page) {

 setTimeout(function () {

 var pagedData = data.slice((page - 1) * pageSize, page * pageSize);

 scope.gridData = pagedData;

 scope.totalServerItems = data.length;

 if (!scope.$$phase) {

  scope.$apply();

}

 getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);

 //update layout of ng-grid
    scope.$watchCollection( "tableData",

    function (newValue, oldValue) {

  getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);

  scope.gridData = newValue;

  }
  );

$scope.persons = [{ name: "Moroni", age: 50 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },
                    { name: "Tiancum", age: 43 },
                    { name: "Jacob2", age: 27 },
                    { name: "Jacob3", age: 27 },
                    { name: "Jacob4", age: 27 },
                    { name: "Jacob5", age: 27 },
                    { name: "Jaewrcob6", age: 27 },
                    { name: "Jerwacob", age: 27 },
                    { name: "Jewrewacob", age: 27 },

                    { name: "Jacob", age: 27 },
                    { name: "Jacob", age: 27 },
                    { name: "Nephi", age: 29 },
                    { name: "Enos", age: 34 }];

$scope.columnDefs = [{ field: 'name', displayName: 'Name', width: '40%' }
               , { field: 'age', displayName: 'Age', width: '40%' }
               , { field: '', displayName: 'Edit', width: '10%' }
               , { field: '', displayName: 'Delete', width: '10%' }
];

$scope.gridOptions = {
    data: 'persons',
    plugins: [new ngGridFlexibleHeightPlugin()],
    showFooter: false,
    columnDefs: 'columnDefs'
};

return {
    restrict: 'A',
    priority: 1002,
    scope: true,
    //scope: { tableData: '=griddata' },
    compile:
        function (tElement, tAttrs) {
            return {
                pre: function (scope, element, attrs, controller) {

                    scope.options = scope.$eval(attrs.ngGrid);
                    scope.options.gridData = [];

                    //get basic data source name
                    scope.BaseSource = scope.options.data;
                    //get data
                    scope.data = scope.$eval(scope.options.data);
                    scope.options.gridData = scope.data;
                    //Configure Page Option
                    scope.pagingOptions = {
                        pageSizes: [10, 20, 30, 500, 1000, 5000], //page Sizes
                        pageSize: 10, //Size of Paging data
                        currentPage: 1 //what page they are currently on
                    };
                    scope.options.pagingOptions = scope.pagingOptions;
                    scope.options.showFooter = true;
                    scope.options.enablePaging = true;
                    scope.options.totalServerItems = 'totalServerItems';
                    scope.options.data = 'gridData';



                },
                post: function (scope, iElement, iAttrs, controller, transcludeFn) {



                    //set paging watch method
                    scope.$watch('pagingOptions', function () {
                        getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);
                    }, true);
                    var getPagedDataAsync = function (pageSize, page) {
                        setTimeout(function () {
                            var pagedData = scope.data.slice((page - 1) * pageSize, page * pageSize);
                            scope.$parent.gridData = pagedData;
                            scope.$parent.totalServerItems = scope.data.length;
                            if (!scope.$$phase) {
                                scope.$apply();
                            }
                        });
                    };
                    getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);


                    //update layout of ng-grid
                    scope.$watchCollection(
                         scope.BaseSource,
                        function (newValue, oldValue) {
                            scope.data = newValue;
                            getPagedDataAsync(scope.pagingOptions.pageSize, scope.pagingOptions.currentPage);
                        }
                    );


                }

            };
        }
}