如何使用row和col值对齐AngularJS中的Gridster组件？

我最近基于AngularJS、KendoUI Charts和angular-gridster搭建了一个仪表盘系统，下面是我写的用于添加带图表的Gridster组件的核心函数：

// 向仪表盘添加组件
$scope.addWidget = function () {
    // 新组件配置
    var newWidget = {
        id: $scope.allWidgetData.selectedOption.id,
        data_source: {},
        config: {
            name: $scope.allWidgetData.selectedOption.name,
            sizeX: 3,
            sizeY: 2,
            row: $scope.row,
            col: $scope.col
        }
    };
    // 后续可补充：发起请求获取图表数据、将组件添加到gridster容器等逻辑
}

这个函数先完成了组件基础配置的初始化：

• 绑定选中组件的ID与名称，确保组件标识和显示名称匹配
• 预设了组件在gridster布局中的尺寸（3列宽、2行高）
• 指定组件初始摆放的行列位置
• 预留data_source字段，后续可用于填充KendoUI Chart所需的图表数据源

接下来只需要补充后续业务逻辑：比如发起请求获取对应ID的图表数据并赋值给newWidget.data_source，再将这个配置好的newWidget对象推入gridster的组件列表数组，就能完成带图表的Gridster组件添加操作了。

内容的提问来源于stack exchange，提问作者Abhishek Sharma