配置选项来自服务时的Angular中断控件

Question

我有一个服务,将返回我的一些配置选项ng-grid.getGridOptions函数获取它所使用的控制器的名称,并返回正确的选项集(为简洁起见,此处仅显示一个选项).

ng-grid选项的服务:

angular.module('services').service('GridOptionsService',function(){

    var documents = {
        data: 'myData',
        enablePaging: true,
        showFooter:true,
        totalServerItems: 'totalServerItems',
        pagingOptions: {
            pageSizes: [50,100,200],
            pageSize: 50,
            currentPage: 1
        },
        filterOptions:  {
            filterText: '',
            useExternalFilter: false
        },
        enableCellEdit: false,
        enableColumnReordering: true,
        enablePinning: false,
        showGroupPanel: false,
        groupsCollapsedByDefault: true,
        enableColumnResize: true,
        showSelectionCheckbox: true,
        selectWithCheckboxOnly: true,
        columnDefs: [
            {field:'docId', displayName:'Document ID', cellTemplate: NgGridDomUtil.toLink('#/documents/{{row.getProperty(col.field)}}')},
            {field:'docTags', displayName:'Tags'},
            {field:'lastSaveDate', displayName:'Last saved'},
            {field:'documentVersion', displayName:'Version', width: 120},
            {field:'busDocId', displayName:'Customer Doc ID'},
            {field:'markedForDelete', displayName:'Deleted', width: 120, cellTemplate: NgGridDomUtil.toCheckbox('{{row.getProperty(col.field)}}')}]
    };

    var gridOptionManager = {
        documents: documents

    }
    return {
        getGridOptions: function(controllerName){
            return gridOptionManager[controllerName];
        }

    }
})

NgGridDomUtil类只是更容易在网格上设置样式:

var NgGridDomUtil = (function(){
    var toLink = function(href){
    var html = '<div class="ngCellText" ng-class="col.colIndex()"><a ng-href= "'+href+'" class="ngCellLink"><span ng-cell-text>{{row.getProperty(col.field)}}</span></a></div>'
    return html;
}
var toCheckbox = function(_selected){
    var html = '<div class="ngCellText" ng-class="col.colIndex()"><input type="checkbox" ng-change="console.log('+"TEST"+')" ng-model="COL_FIELD"  ng-input="COL_FIELD"' + (_selected ? 'selected' : '') + ' /></div>'
    return html
}
return {
    toLink: toLink,
    toCheckbox: toCheckbox
}
})();

我的问题是当我使用GridOptionsService来检索数据时,数据仍然正确地呈现给网格,但文本过滤不再有效并且分页被破坏.但是,selectedFilterOption仍然有效.

控制器:

angular.module('controllers').controller('Repository', ['$scope', 'DataContext','GridOptionsService','$http', function($scope, DataContext,GridOptionsService,$http) {
    $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();
            DataContext.getDocuments().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{
            DataContext.getDocuments().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
    }
    $scope.gridOptions = GridOptionsService.getGridOptions('documents');
    //get the data on page load
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
}]);

我硬编码到控制器中的网格选项与从服务返回的网格选项相同.我不明白为什么网格呈现,下拉过滤器工作,但只有当网格的选项来自服务时,分页被打破？但如果将其硬编码到控制器中,它会按预期工作.

编辑:如果有人可以更有说服力地陈述我的问题,请随时编辑标题.

Answer 1

我真的不知道 ngGrid 是如何实现的，但我确实知道许多指令中存在一个常见的陷阱，那就是它们希望它们的配置在初始化后立即准备好。这意味着他们不是观察配置对象，而是假设它存在并直接在链接\控制器函数中使用它，该函数在创建后立即运行。

如果确实如此，解决该问题的一个快速解决方法是仅在拥有配置对象时才初始化指令。假设您通过作用域上的变量“选项”传递配置对象，然后您将编写如下内容：

<!-- If options exists on your scope, it means you fetched it from the server -->
<div ng-if="options">
    <div ng-grid ng-grid-options="options"></div>
</div>

再说一次，我不熟悉 ngGrid 或其用法，这只是一个有根据的猜测，得出结论并将其应用到正确的 API 上。