如何在角度 ui-grid 中传递选定的行项以获取另一个 ui-grid 的数据

Question

我有 2 个 ui-grids 使用 2 个不同的控制器显示数据，每个控制器调用不同的服务。 （服务使用 ngresource 而不是 http。） 我的需要是：当在第一个网格（供应商）中选择一行时，第二个网格（合同）应该只在值与第一个网格中获取的 id 匹配的地方获取数据。 所以基本上当第一个网格供应商 $scope.gridApi.selection.on.rowSelectionChanged 事件被触发时，应使用所选行的 VEID 值触发contracts.query。 我是 Angular 的新手，所以无法准确地弄清楚在哪里传递值以及在哪里添加函数来实现这一点。看过关于$emit和$on的文章，但不清楚。我的服务也使用 $ngresource 和 QUERY 方法，而大多数示例都使用 $http 或 POST 方法。请帮忙！

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

    angular.module('VendorApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection','ang_venservice','ang_contservice','ui.grid.pinning']);

})();


//vendor controller
(function () {
    'use strict';

    angular
        .module('VendorApp')
        .controller('ang_vencontroller', ang_vencontroller);
    ang_vencontroller.$inject = ['$scope', 'vendors','contracts','$timeout', 'uiGridConstants'];


    function ang_vencontroller($scope, $rootscope,vendors, $timeout, uiGridConstants)
    {
        $scope.vendorsvalues = vendors.query()

        $scope.gridOptions = {
            enableRowHeaderSelection: false,
            multiSelect: false,
            enableRowSelection: true,
            enableSelectAll: true,
            enableSorting: true,
            enableFiltering: true,
            enablePagination: true,
            enablePaginationControls: true,
            paginationCurrentPage: 1,
            paginationPageSize: 100,
            maxVisibleColumnCount: 200,
            columnDefs: [
              { name: 'VENDORID', field: 'MVE_VEID' },
              { name: 'NAME', field: 'VE_NAME' },
              { name: 'ADDR1', field: 'VE_ADDR1' }
            ],
            data: $scope.vendorsvalues

        };

        $scope.gridOptions.onRegisterApi = function (gridApi) {
            $scope.gridApi = gridApi;
            $timeout(function () {
                $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                    $scope.value = row.entity.MVE_VEID;
                    $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
                    //$scope.contractvalues =function(){$rootScope.$emit( contracts.query({ id: $scope.value }))};

                });
              
  
              //contract controller            
              
              (function () {
    'use strict';

    angular
        .module('VendorApp')
        .controller('ang_contcontroller', ang_contcontroller);

    ang_contcontroller.$inject = ['$scope', 'contracts'];

    function ang_contcontroller($scope, $rootscope,contracts) {
        $scope.contractvalues = contracts.query({ id: $scope.value });
        $scope.gridoptions2 = {
            enableRowHeaderSelection: false,
            multiSelect: false,
            enableRowSelection: true,
            enableSelectAll: true,
            enableSorting: true,
            enableFiltering: true,
            enablePagination: true,
            enablePaginationControls: true,
            paginationCurrentPage: 1,
            paginationPageSize: 100,
            maxVisibleColumnCount: 200,
            columnDefs: [
              { name: 'CONTRACTID', field: 'MCO_COID' },
              { name: 'NAME', field: 'CO_DESC' },
              { name: 'VENDORID', field: 'MCO_VEID' }
            ],
            data: $scope.contractvalues
        };

    }
})();


              //contract service
              
              (function () {
    'use strict';

    var ang_contservice = angular.module('ang_contservice', ['ngResource']);
    ang_contservice.factory('contracts', ['$resource', function ($resource)
    {
        return $resource('/api/ContractsAPI/:id', { id: 0 }, { query: { method: 'GET', params: {}, isArray: true } });
    }])
})();

<body ng-cloak>
    <h4>VENDORS</h4>
    <div ng-controller="ang_vencontroller" >
        <div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="grid"></div>
        <strong>SelectedRowCount:</strong> <span ng-bind="mySelectedRows.length"></span> 
        <br />
        <strong>SelectedVendor:</strong> <span ng-bind="value"></span>
    </div>
    <br>
    <br>
    <h4>CONTRACTS</h4>
    <div ng-controller="ang_contcontroller">
        <div id="grid2" ui-grid="gridoptions2" ui-grid-pagination ui-grid-selection class="grid"></div>
    </div>
</body>
</html>  

Answer 1

我得到了这个工作。 我必须将两个网格都放在同一个控制器中，这解决了问题。

这是因为 $scope.GridApi 在控制器之间不可用。 U 可能能够使用 Controller AS 实现网格在不同控制器中进行交互，但现在，这符合我的目的。 以下是工作控制器代码：

(function () {
'use strict';

angular
    .module('VendorApp')
    .controller('ang_vencontroller', ang_vencontroller);
ang_vencontroller.$inject = ['$scope','$rootScope', 'vendors','contracts','$timeout', 'uiGridConstants'];


function ang_vencontroller($scope, $rootScope, vendors, contracts, $timeout, uiGridConstants) {
    $scope.value = 0;
    $scope.vendorsvalues = vendors.query();

    $scope.gridOptions = {
        enableRowHeaderSelection: false,
        multiSelect: false,
        enableRowSelection: true,
        enableSelectAll: true,
        enableSorting: true,
        enableFiltering: true,
        enablePagination: true,
        enablePaginationControls: true,
        paginationCurrentPage: 1,
        paginationPageSize: 100,
        maxVisibleColumnCount: 200,
        columnDefs: [
          { name: 'VENDORID', field: 'MVE_VEID' },
          { name: 'NAME', field: 'VE_NAME' },
          { name: 'ADDR1', field: 'VE_ADDR1' }
        ],
        data: $scope.vendorsvalues

    };

    $scope.gridOptions.onRegisterApi = function (gridApi) {
            $scope.gridApi = gridApi;
            console.info("grid api 1 registered", $scope.gridApi);

            $timeout(function () {
                $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
                $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
                $scope.value = $scope.mySelectedRows[0].MVE_VEID;

                $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                $scope.value = row.entity.MVE_VEID;
                $scope.contractvalues = contracts.query({ id: $scope.value });
                console.log("scope.contractvalues:", $scope.contractvalues);
                $scope.gridoptions2.data = $scope.contractvalues;
                $scope.gridApi2.core.notifyDataChange(uiGridConstants.dataChange.ALL);
            });
        });
    };

    $scope.contractvalues = contracts.query({ id: $scope.value });
    $scope.gridoptions2 = {
        enableRowHeaderSelection: false,
        multiSelect: false,
        enableRowSelection: true,
        enableSelectAll: true,
        enableSorting: true,
        enableFiltering: true,
        enablePagination: true,
        enablePaginationControls: true,
        paginationCurrentPage: 1,
        paginationPageSize: 100,
        maxVisibleColumnCount: 200,
        columnDefs: [
          { name: 'CONTRACTID', field: 'MCO_COID' },
          { name: 'NAME', field: 'CO_DESC' },
          { name: 'VENDORID', field: 'MCO_VEID' }
        ],
        data: $scope.contractvalues,
        onRegisterApi: function (gridApi) {
            $scope.gridApi2 = gridApi;
        }

    };
    $scope.gridoptions2.onRegisterApi = function (gridApi) {
        $scope.gridApi2 = gridApi;
        console.info("***grid api 2 registered***", $scope.gridApi2);

    };

}
})();