AngularJs UI 从模态重新绑定网格

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' 我执行 insert/update 操作，在 insert/update 操作后我想在保存功能上重新绑定网格。这是代码：

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'参数未定义。

rebind/refresh ui 网格的最佳方法是 bootstrap 模态？

Answer 1

在RowEditCtrl中接收到的grid不是引用，所以在RowEditCtrl中刷新也无济于事。而是在 MainController 中的模态承诺解决后立即执行此操作。像这样：

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

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

Answer 2

最后我是这样解决的：

在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");
        }

    });

AngularJs UI 从模态重新绑定网格

AngularJs UI Grid rebind from Modal

data-binding

twitter-bootstrap

angularjs

bootstrap-modal

angular-ui-grid