C# 如何使用不同角度控制器重复使用相同的ui网格

我是Angular 1.6和UI网格的新手，所以我正在为一些简单的东西而挣扎。我希望在我的主控制器中定义一个UI网格，它可以被重新定义并与来自不同角度控制器的数据一起重新使用。更具体地说，我希望在主角度控制器中使用一个网格定义来创建多个.CSHTML网格模板。我想用不同的数据和不同的列定义从不同的角度控制器填充网格数据数组。一次只能有一个活动栅格

为每个控制器使用单独的网格定义是可行的，但我最终可能有20个网格；所以我不希望在我的主角度控制器中有那么多可重复的膨胀。网格定义中唯一更改的部分是列定义和数据。下面是一个简化的项目布局，有助于讨论

在我的主角度控制器中，我有一个UI网格定义，我想从不同文件中的多个角度控制器重新使用它。网格定义如下：

//MainController in app.js
(function () {
    'use strict';

    angular.module('CRNApp', ['ui.bootstrap', 'ui.grid', 'ui.grid.autoResize', 'ui.grid.emptyBaseLayer', 'ui.grid.selection']);

    MainController.$inject = ['$scope', '$http', '$uibModal', '$log','uiGridConstants'];

    angular.module('CRNApp')
    .controller('MainController', MainController);

    $scope.policyList = {                //grid options and data for policy data
        rowHeight: 40,
        enableFiltering: true,
        enableRowSelection: true,
        enableRowHeaderSelection: false,
        data: 'policyData',
        columnDefs: [ //the column defs will be different for each different controller
            { name: 'PolicyId'},
            { name: 'PolicyState'},
            { name: 'AgentName' },
            { name: 'InforcePremium' },
            { name: 'LOB'}
        ]
    };
    $scope.policyData = [];              //stores policy array returned from MVC controller to UI
    $scope.policySelected = 'false';     //tracks if a row is selected. Allows row-depenendent nav buttons to be enabled on bav bar
    $scope.mySelectedPolicy = {};

    //grid options for processor grid
    $scope.policyList.multiSelect = false;
    $scope.policyList.modifierKeysToMultiSelect = false;
    $scope.policyList.noUnselect = false;
    $scope.policyList.onRegisterApi = function (policyApi) {
        $scope.policyApi = policyApi;
        $scope.policyApi.selection.on.rowSelectionChanged($scope, function (row) {
            if (row.isSelected) {
                $scope.policySelected = 'true';
                $scope.mySelectedPolicy = row.entity; //copy selected row so that we can access it from processor controller
            }
            else
                $scope.policySelected = 'false';
        });
    };

    //this function recalculates the height of the visible grid after the row count changes
    $scope.getPolicyTableHeight = function () {
        var rowHeight = 30; // your row height
        var headerHeight = 30; // your header height
        return {
            height: ($scope.policyList.data.length * rowHeight + headerHeight) + "px"
        };
    };

}());

在main _Layout.cshtml中，导航栏上有一个按钮，该按钮绑定到称为PolicyController的单独角度控制器中的函数。该函数的名称称为LoadPolicysGrid。此函数使用数据填充policyList网格定义中的policyData数组，请参见上面的主控制器。我将在页面上有多个按钮，在不同的控制器中调用类似的函数。例如，我将有一个Processor按钮，用于调用ProcessorController角度文件中的LoadProcessors函数。LoadProcessors函数将在主控制器中重复使用相同的网格定义，但列定义和网格数组将不同

<input style="margin-top: 8px !important; margin-bottom: 8px !important; margin-left: 8px !important;" type="submit" value="Get Records" ng-controller="PolicyController" ng-click="loadPoliciesGrid()" class="btn btn-default btn-sm">

网格模板绑定到Index.cshtml页面中的策略控制器，该策略控制器作为主_Layout.cshtml页面中的子页面加载。这些模板中的每一个都应将其数据绑定到相同的UI网格：

@*Index.cshtml. Each template is bound to a different Angular controller*@
@{ViewBag.Title = "ICS Portal - Home Page";}
<div ng-include="'templates/policiesGrid.cshtml'" ng-controller="PolicyController"></div>
<div ng-include="'templates/processorGrid.cshtml'" ng-controller="ProcessorController"></div>
<div ng-include="'templates/usersGrid.cshtml'" ng-controller="UserController"></div>

网格标记容器在一个单独的模板文件中定义，称为policiesgrid.cshtml。每个网格标记模板位于单独的文件中，但应引用相同的UI网格定义：

<div style="margin-left: auto; margin-right: auto;">
    <div ui-if="policyList.data.length>0" ng-style="getPolicyTableHeight()"
     ui-grid-auto-resize ui-grid-empty-base-layer ui-grid-selection id="policyGrid"
     ui-grid="policyList" class="processorGrid" ng-show="showGrid == 'policies'"
     style="margin-left: auto; margin-right: auto;">
    </div>
</div>

---

您应该使用服务获取数据，但无论如何，在AngularJS中有很多方法可以实现您想要的一切。如果你不想重构你的代码，如果我理解正确，你需要控制器之间的基本通信

对你们来说，最简单的方法就是在你们的控制器上用网格设置观察者

因此，在设置网格的控制器上执行以下操作：

$scope.$on('dataGridChangedMessage', (event, argumentsPassedToGrid) => {
    $scope.policyList.columnDefs = argumentsPassedToGrid.columnDefs;
    $scope.policyList.data = argumentsPassedToGrid.data;
    // you might neeed here to refresh the grid using API, something like: policyApi.grid.refresh();
    // or try to trigger digest cycle manually if it doesn't work with: $timeout($scope.$apply()); 
});

在您的其他控制器上，您需要注入$rootScope并广播您的数据/columnDefs-当您的$http承诺得到解决时：

$rootScope.$broadcast('dataGridChangedMessage', {
    columnDefs: [],  // this is your new column defs
    data: [] // this is your new data
};

因此，用户界面网格控制器显示数据，控制器发送数据，如下所示：

$scope.$on('dataGridChangedMessage', (event, argumentsPassedToGrid) => {
    $scope.policyList.columnDefs = argumentsPassedToGrid.columnDefs;
    $scope.policyList.data = argumentsPassedToGrid.data;
    // you might neeed here to refresh the grid using API, something like: policyApi.grid.refresh();
    // or try to trigger digest cycle manually if it doesn't work with: $timeout($scope.$apply()); 
});

---

controller1=>ControllerUI网格您的帖子让我走上了正确的轨道。谢谢你详尽的回答。我知道我还有很多东西要学。

<my-ui-grid-generic-component url-key="some-name-1" url-params="{something: whatever}"></my-ui-grid-generic-component>

let uigridDataAPIs = {
  'some-name-1': 'http://google.com',
  'some-name-2': 'http://google.com',
};