Question

我是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的东西。任何人都有更好的方法来做这个吗？谢谢！

Answer 1

您需要将大部分内容转移到“简明”指令中。如果你没有掌握指令，那么你的控制器总是会像这样过度负担和疯狂。理想情况下，您的控制器几乎只在您的范围和服务之间来回传递数据。

组织AngularJS控制器

1 个答案: