javascript - 当配置选项来自服务时，Angular 中的控件会中断

Question

我有一项服务会返回我的一些 ng-grid 配置选项。 getGridOptions 函数采用它所使用的 Controller 的名称并返回正确的选项集(为简洁起见，此处仅显示一个)。

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 仍然有效。

Controller :

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);
}]);

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

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

Answer 1

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

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

<!-- 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。