Question

我有一个包含ag-grid和单个控制器的视图，用于我的角度应用程序。我正在尝试清理控制器，使其“变薄”，并且我已经在指令中移除了一些代码，并且我已经为数据检索设置了服务。

现在我留下了一个关于ag-grid代码的大博客，我最好还是希望看到其他地方的东西，但我不确定哪里会是最好的地方。

这里有最好的做法吗？

<div class="container" ng-controller="MainController">

<div class="row">
    <div class="col-sm-4">
        <div>
            <div ag-grid="gridOptions" class="ag-fresh" style="height: 500px; width: 100%"></div>
        </div>
    </div>
    <div class="col-sm-8">
        <div my-directive body-unid="currentUNID"></div>
    </div>
</div>

agGrid.initialiseAgGridWithAngular1(angular);

angular.module（ '应用程序'） .controller（'MainController'，函数（$ scope，myService，MyConfig）{

    $scope.isExternalFilterPresent = function () {
        return $scope.searchtext != "";
    };

    $scope.doesExternalFilterPass = function (node) {

        // Returning true means all the documents are displayed
        if ($scope.searchtext == "") {
            return true;
        }

        if ($scope.joinedUnidsOfSearch) {
            return ($scope.joinedUnidsOfSearch.indexOf(node.data['@unid']) >= 0);
        } else {
            return true;
        }
    };

    var columnDefs = [
        {
            headerName: "Navigation", field: "Subject", cellStyle: function (params) {
            if (params.data["@indent"]) {
                switch (params.data["@indent"]) {
                    case 1:
                        return {'margin-left': '10px'};
                        break;
                    case 2:
                        return {'margin-left': '20px'};
                        break;
                    case 3:
                        return {'margin-left': '30px'};
                        break;
                    case 4:
                        return {'margin-left': '40px'};
                        break;
                    default:
                        return {'margin-left': '50px'};
                        break;
                }
            } else {
                return {'font-size': 'large'};
            }
        }
            //, headerName: "unid", field: "@unid"
        }
    ];

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowSelection: 'single',
        enableFilter: true,
        isExternalFilterPresent: $scope.isExternalFilterPresent,
        doesExternalFilterPass: $scope.doesExternalFilterPass,

        angularCompileRows: true,
        onRowClicked: function (event) {
            //console.log('a row was clicked', event.data["@unid"]);
            $scope.currentUNID = event.data["@unid"];
            $scope.$apply();
        },
        onColumnResized: function (event) {
            //console.log('a column was resized');
        },
        onGridReady: function (event) {
            //console.log('the grid is now ready');
        },

        // onRowSelected: rowSelected,
        // onSelectionChanged: onSelectionChanged,

        onGridSizeChanged: function () {
            //console.log('Grid Size changed');
            $scope.gridOptions.api.sizeColumnsToFit();
        }
    };

    $scope.databaseTitle = MyConfig.databaseTitle;

    $scope.SearchButtonClick = function () {
        $scope.searchComment = '';
        loadSearchResults($scope);
    };

    $scope.ClearSearchBox = function () {
        $scope.searchtext = '';
        $scope.searchComment = '';
        $scope.gridOptions.api.onFilterChanged();
    };


    $scope.NextButtonClick = function () {
        //console.log("next button clicked");
        var selectedNodes = $scope.gridOptions.api.getSelectedNodes();
        if (selectedNodes) {
            if (selectedNodes && selectedNodes.length === 1) {
                var selectedNode = selectedNodes[0];
                $scope.gridOptions.api.forEachNodeAfterFilter(function (node) {
                    if (node.childIndex === (selectedNode.childIndex + 1)) {
                        node.setSelected(true);
                        $scope.currentUNID = node.data["@unid"];
                        return;
                    }
                });
            }
        }
    };

    $scope.PrevButtonClick = function () {
        //console.log("next button clicked");
        var selectedNodes = $scope.gridOptions.api.getSelectedNodes();
        if (selectedNodes) {
            if (selectedNodes && selectedNodes.length === 1) {
                var selectedNode = selectedNodes[0];
                $scope.gridOptions.api.forEachNodeAfterFilter(function (node) {
                    if (node.childIndex === (selectedNode.childIndex - 1)) {
                        node.setSelected(true);
                        $scope.currentUNID = node.data["@unid"];
                        return;
                    }
                });
            }
        }
    };

    function loadSearchResults($scope) {
        //console.log('loadSearchResults started');
        if ($scope.searchtext) {
            myService.loadAllUNIDSThatMatchSearch($scope.searchtext).then(function (data) {
                //console.log('start after loading of search UNIDS');
                var receiveddata = angular.fromJson(data);
                if (receiveddata) {
                    if (receiveddata.length > 0) {
                        $scope.searchComment = '';
                        var arrayUNIDS = receiveddata.map(function (a) {
                            return a["@unid"];
                        });
                        $scope.joinedUnidsOfSearch = arrayUNIDS.join(); // this variable gets used in the function doesExternalFilterPass
                        $scope.gridOptions.api.onFilterChanged(); // refreshes filter of grid
                        // set the selected document to the first of the search query
                        $scope.gridOptions.api.forEachNodeAfterFilter(function (node) {
                            if (node.firstChild === true) {
                                // node.setSelected(true);
                                $scope.gridOptions.api.selectNode(node, true);
                                $scope.currentUNID = node["@unid"];
                            }
                        });
                    } else {
                        if ($scope.searchtext == '' || $scope.searchtext == undefined) {
                            $scope.searchComment = 'Das Suchfeld ist leer!';
                        } else {
                            $scope.searchComment = 'Keine Dokumenten für ' + $scope.searchtext + ' gefunden.';
                        }


                    }
                }
                //console.log('end after loading of search UNIDS');
            });
        }
        //console.log('loadSearchResults ended');
    }

    myService.loadAllNavigationDocuments()
        .then(function (response) {
            $scope.gridOptions.api.setRowData(response);
        });


});

Answer 1

现在，看到您的代码，我认为您可以将所有网格内容移动到服务中。在服务创建方法中然后在控制器中调用，如：

//create the event "onGridSizeChanged" for the grid
gridService.onGridSizeChanged($scope.gridOptions, fuction(options){
   //callback for size changed
});

只是一个例子，所以创建你需要的所有其他方法。您的控制器将是干净的，您可以在其他控制器中使用该服务。 Wich方法具有一种责任性，易于维护。

我应该在哪里放置我的ag-grid代码？

1 个答案: