组织一个 AngularJS 控制器

Organizing a AngularJS Controller

本文关键字:一个 AngularJS 控制器      更新时间:2023-09-26

我是AngularJS世界的新手,来自Backbone背景。 到目前为止,我喜欢它,但两者在架构实践方面存在很大差异(有人应该写一篇关于这个哈哈的文章)。

我开始构建一些相当大的控制器,但感觉不对。 例如,这是一个基本控件,用于执行搜索和填充 ng-grid 控件以及无限滚动此网格。

var ctrl = ['$scope', 'model', '$modal', function ($scope, model, $modal) {
    $scope.page = 0;
    $scope.loading = true;
    $scope.mySelections = [];
    $scope.rows = [];
    $scope.columnDefs = [{
        field: 'Checked',
        width: "50",
        sortable: false,
        headerCellTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-show="multiSelect" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
        cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>'
    }];
    $scope.gridOptions = {
        data: 'rows',
        columnDefs: "columnDefs",
        enableColumnResize: true,
        selectedItems: $scope.mySelections,
    };
    /**
     * Pages the grid and returns a $.deferred
     */
    var pageGrid = function () {
        return model.ExecuteSearchForReport("4146", ++$scope.page)
            .done(function (records) {
                $.each(records, function (i, record) {
                    var fields = {};
                    $.each(record.Value, function (ii, field) {
                        var fieldKey = field.Key.replace(/'s/g, '');
                        fields[fieldKey] = field.Value;
                    });
                    $scope.rows.push(fields)
                });
                $scope.$digest();
            });
    };
    /**
     * Page the grid initally.
     */
    pageGrid().done(function (records) {
        createColumns(records);
        $scope.loading = false;
        // if the grid height 
        var gridHeight = $('.ngGrid').height();
        var repage = function () {
            if ($('.ngCanvas').height() < gridHeight) {
                pageGrid().done(function () {
                    repage();
                });
            }
        };
        repage();
        $scope.$digest();
    });
    /**
     * Creates the columns for the grid based on the records.
     */
    var createColumns = function (records) {
        if (records.length) {
            $.each(records[0].Value, function (ii, field) {
                var fieldKey = field.Key.replace(/'s/g, '');
                var col = {
                    field: fieldKey,
                    displayName: field.Key,
                    resizable: true
                };
                // all the other columns are small
                if (fieldKey !== "FileName") {
                    col.width = "100";
                }
                $scope.columnDefs.push(col);
            });
        }
    };
    /**
     * List for `ngGridEventScroll` event to page the data set.
     */
    $scope.$on('ngGridEventScroll', function () {
        pageGrid();
    });
    /**
     * Move the secure button was clicked, load next screen.
     */
    $scope.moveToSecure = function () {
        $scope.loading = true;
        model.GetSecureDetails().done(function (data) {
            $scope.loading = false;
            var modalInstance = $modal.open({
                templateUrl: 'Views/Modal.html',
                controller: ModalInstanceCtrl,
                resolve: {
                    data: function(){
                        return {
                            header: "Move To Secure",
                            body: "Views/Move.html",
                            lists: data
                        };
                    }
                }
            });
            modalInstance.result.then(function (formData) {
                var defs = [];
                $.each($scope.mySelections, function (i, sel) {
                    defs.push(model.MoveToSecure({
                        Id: sel.EventID.substring(4, sel.EventID.length),
                        Filename: sel.FileName
                    }));
                });
                $.when.apply($, defs).done(function () {
                    alert('Move completed');
                });
            });
        });
    };
}];

我知道,这很多,而且在所有变量初始化、私有方法和通用初始化方法之间,对我来说感觉有点非结构化。 对我来说,它并不简洁和确定性,这是我喜欢Backbone的地方。 有人对更好的方法有任何反馈吗? 谢谢!

您需要将

大部分内容移动到"简洁"的指令中。如果你不掌握指令,你的控制器总是会像这样负担过重和疯狂。理想情况下,您的控制器几乎只在您的范围和服务之间来回传输数据。