Question

我有一个主控制器，我将数据加载到“angular-ui-grid”中，我使用bootstrap模态形式修改细节数据，在修改后的行模板中调用ng-dlbclick：

app.controller('MainController', function ($scope, $modal, $log, SubjectService) {
    var vm = this;    
    gridDataBindings();

    //Function to load all records
    function gridDataBindings() {
        var subjectListGet = SubjectService.getSubjects(); //Call WebApi by a service

        subjectListGet.then(function (result) {
            $scope.resultData = result.data;
        }, function (ex) {
            $log.error('Subject GET error', ex);
        });

    $scope.gridOptions = {                 //grid definition
        columnDefs: [
          { name: 'Id', field: 'Id' }
        ],
        data: 'resultData',
        rowTemplate: "<div ng-dblclick=\"grid.appScope.editRow(grid,row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" ui-grid-cell></div>"
    };

    $scope.editRow = function (grid, row) {                 //edit row 
        $modal.open({
            templateUrl: 'ngTemplate/SubjectDetail.aspx',
            controller: 'RowEditCtrl',
            controllerAs: 'vm',
            windowClass: 'app-modal-window',
            resolve: {
                grid: function () { return grid; },
                row: function () { return row; }
          }
        });
    }
});

在控制器'RowEditCtrl'中执行插入/更新操作，在保存功能上，我想在插入/更新操作后重新绑定网格。这是代码：

app.controller('RowEditCtrl', function ($modalInstance, $log, grid, row,  SubjectService) {
    var vm = this;
    vm.entity = angular.copy(row.entity);
    vm.save = save;

    function save() {
        if (vm.entity.Id === '-1') {
            var promisePost = SubjectService.post(vm.entity);
            promisePost.then(function (result) {
                //GRID REBIND  ?????      
            }, function (ex) {
                $log.error("Subject POST error",ex);
            });
        }
        else {
            var promisePut = SubjectService.put(vm.entity.Id, vm.entity);
            promisePut.then(function (result) {
                //row.entity = angular.extend(row.entity, vm.entity);
                //CORRECT WAY?
            }, function (ex) {
                $log.error("Subject PUT error",ex);
            });
        }
        $modalInstance.close(row.entity);
    }
});

我尝试过 grid.refresh（）或 grid.data.push（），但似乎“grid”参数上的所有操作都未找到。

哪个是从引导模式重新绑定/刷新ui-grid的最佳方法？

Answer 1

我终于以这种方式解决了：

在 RowEditCtrl

中

            var promisePost = SubjectService.post(vm.entity);
            promisePost.then(function (result) {                
            vm.entity.Id = result.data;
            row.entity = angular.extend(row.entity, vm.entity);
            $modalInstance.close({ type: "insert", result: row.entity });
        }, function (ex) {
            $log.error("Subject POST error",ex);
        });

在 MainController

中

 modalInstance.result.then(function (opts) {
        if (opts.type === "insert") {
            $log.info("data push");
            $scope.resultData.push(opts.result);
        }
        else {
            $log.info("not insert");
        }

    });

Answer 2

RowEditCtrl 内收到的网格不是引用，因此无法在 RowEditCtrl 内刷新。而是在 MainController 中解决模态承诺之后立即执行此操作。像这样：

var modalInstance = $modal.open({ ...});

modalInstance.result.then(function (result) {
      grid.refresh() or grid.data.push()
});

AngularJs UI Grid从Modal重新绑定

2 个答案: