javascript - 从 Controller Angular JS 重构特定于对象的逻辑

Question

在我的 Controller 中，我目前拥有生成工作 ng-grid 的所有功能。

Controller

app.controller('DocumentController',function($scope,DocumentService) {
  $scope.filterOptions = {
      filterText: '',
      useExternalFilter: false
  };
    $scope.totalServerItems =0;
    $scope.pagingOptions ={
        pageSizes: [5,10,100],
        pageSize: 5,
        currentPage: 1
    }
    //filter!
    $scope.dropdownOptions = [{
        name: 'Show all'

    },{
        name: 'Show active'
    },{
        name: 'Show trash'
    }];
    //default choice for filtering is 'show active'
    $scope.selectedFilterOption = $scope.dropdownOptions[1];


    //three stage bool filter
    $scope.customFilter = function(data){
        var tempData = [];
        angular.forEach(data,function(item){
            if($scope.selectedFilterOption.name === 'Show all'){
                tempData.push(item);
            }
            else if($scope.selectedFilterOption.name ==='Show active' && !item.markedForDelete){
                tempData.push(item);
            }
            else if($scope.selectedFilterOption.name ==='Show trash' && item.markedForDelete){
                tempData.push(item);
            }
        });
        return tempData;
    }



    //grabbing data
    $scope.getPagedDataAsync = function(pageSize, page,  searchText){
            var data;
            if(searchText){
                var ft = searchText.toLowerCase();
                DocumentService.get('filterableData.json').success(function(largeLoad){
                    //filter the data when searching
                    data = $scope.customFilter(largeLoad).filter(function(item){
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    })
                    $scope.setPagingData($scope.customFilter(data),page,pageSize);
                })
            }
            else{
                DocumentService.get('filterableData.json').success(function(largeLoad){
                    var testLargeLoad = $scope.customFilter(largeLoad);
                    //filter the data on initial page load when no search text has been entered
                    $scope.setPagingData(testLargeLoad,page,pageSize);
                })
            }
    };
    //paging
    $scope.setPagingData = function(data, page, pageSize){
        var pagedData = data.slice((page -1) * pageSize, page * pageSize);
        //filter the data for paging
        $scope.myData = $scope.customFilter(pagedData);
        $scope.myData = pagedData;
        $scope.totalServerItems = data.length;
        if(!$scope.$$phase){
            $scope.$apply();
        }
    }

    //watch for filter option change, set the data property of gridOptions to the newly filtered data
    $scope.$watch('selectedFilterOption',function(){
            var data = $scope.customFilter($scope.myData);
            $scope.myData = data;
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
            $scope.setPagingData($scope.myData,$scope.pagingOptions.currentPage,$scope.pagingOptions.pageSize);
    })
    $scope.$watch('pagingOptions',function(newVal, oldVal){
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText);
            $scope.setPagingData($scope.myData,$scope.pagingOptions.currentPage,$scope.pagingOptions.pageSize);
    },true)


    $scope.message ="This is a message";
    $scope.gridOptions = {
      data: 'myData',
      enablePaging: true,
        showFooter:true,
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        enableCellEdit: true,
        enableColumnReordering: true,
        enablePinning: true,
        showGroupPanel: true,
        groupsCollapsedByDefault: true,
        enableColumnResize: true
    }
    //get the data on page load
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
});

这可以正常工作并正确分页，但这意味着在我想使用网格的每个 Controller 上，我必须重新执行所有这些分页功能。因此，我考虑将所有特定于网格的代码提取到它自己的类中。

var NgGrid = (function(){
    function NgGrid(gridOptions){
        this.service = gridOptions.service;
        this.filterOptions = gridOptions.filterOptions;
        this.pagingOptions  = gridOptions.pagingOptions;
        this.dropdownOptions = gridOptions.dropdownOptions;
        this.selectedFilterOption = this.dropdownOptions[1];
        this.totalServerItems = 0;
        this.myData = [];
        this.customFilter = function(data,propName){
            var tempData =[];
            angular.forEach(data,function(item){
                if(this.selectedFilterOption.name === 'Show all'){
                    tempData.push(item);
                }
                else if(this.selectedFilterOption.name === 'Show active' && !item[propName]){
                    tempData.push(item);
                }
                else if(this.selectedFilterOption.name === 'Show trash' && item[propName]){
                    tempData.push(item);
                }
            })
        }
        this.getPagedDataAsync = function(pageSize, page, searchText){
            var data;
            if(searchText){
                var ft = searchText.toLowerCase();
                //filter the data when searching
                this.service.get('filterableData.json').success(function(data){
                    data = this.customFilter(data).filter(function (item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    this.setPagingData(this.customFilter(data),page,pageSize);
                })
            }
            else{
                this.service.get('filterableDat.json').success(function(largeLoad){
                    var filtered = this.customFilter(largeLoad);
                    this.setPagingData(filtered,page, pageSize);
                })
            }
        }
        this.setPagingData = function(data, page, pageSize){
            var pagedData = data.slice((page-1) * pageSize, page * pageSize);
            this.myData = this.customFilter(pagedData);
            this.myData = pagedData;
            this.totalServerItems = data.length;
            if($scope.$$phase){
                $scope.apply();
            }
        }
    }
    return NgGrid;
});

我认为我添加到作用域的大多数内容(例如filterOptions和dropdownOptions)可能在NgGrid对象的构造函数中具有默认值，并且可能在 Controller 本身中被覆盖。我不确定的是

this.setPagingData = function(data, page, pageSize){
            var pagedData = data.slice((page-1) * pageSize, page * pageSize);
            this.myData = this.customFilter(pagedData);
            this.myData = pagedData;
            this.totalServerItems = data.length;
            //right here it gets fuzzy, not even totally sure why it works
            if($scope.$$phase){
                $scope.apply();
            }
        }

在 DocumentController.js 文件中，我在其范围内放置了许多与网格相关的选项，因此当我创建 NgGrid "class" 时，我为此切换了 $scope。但对于这一部分，我不知道我应该做什么。我是否也应该将 Controller 传递给 NgGrid 的构造函数？我可以通过这种方式访问​​ Controller 的 $scope 吗？或者，如果我只计划在 Controller 内部使用这个对象，我应该说搞砸吧，我知道会有一个 $scope 和 $$phase 可用，并让我的类保持原样？

Answer 1

传递范围是不好的做法。虽然有一些有用的方法可以使用通用构造函数来创建可重用的基本 Controller 、服务等。但我认为这种情况不能保证在 Angular 组件之外工作。

我建议您将大部分逻辑和数据转移到一个或多个服务中。当您将这些服务注入(inject) Controller 时，您可以将它们返回的对象分配给作用域变量，这将为您提供在 Controller 作用域上拥有数据和方法的好处，同时不会使 Controller 本身膨胀。

为了帮助演示这是如何工作的，我创建了 this demo虽然它非常通用并且不包含您的代码，但应该有助于为您如何进行自己的重构提供一个模板。