如何自动将新保存的记录添加到ui-grid？

Question

我正在学习棱角分明和弹簧。我有一个列表屏幕，我使用角度ui网格。在列表屏幕中，可以通过单击按钮和弹出窗口添加新记录。现在，当用户通过弹出窗口添加记录时，即使记录成功保存在数据库中，它也没有反映在网格中。有人可以指导我在数据库保存后将记录推送到网格吗？

列表屏幕的

html

<md-card flex >
    <div ui-grid=" vehicleGrid" ui-grid-exporter ui-grid-selection class="myGrid"></div>
</md-card> 

<md-button class="md-fab md-fab-bottom-right md-accent" aria-label="Add Vehicle" ui-sref="vehicle_mgmnt.add">
    <md-icon>add</md-icon>
</md-button>

控制器 - vehicle_mgmnt控制器

angular.module('trackzApp')
  .controller('VehicleMgmntController', function($scope, $mdDialog, $mdMedia, Principal, Vehicle, ParseLinks, Language, uiGridConstants) {
      //$scope.users = [];
      $scope.authorities = ["ROLE_USER", "ROLE_ADMIN"];
      Language.getAll().then(function(languages) {
        $scope.languages = languages;
      });

      Principal.identity().then(function(account) {
        $scope.currentAccount = account;
      });
      $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');
      // $scope.page = 1;
      $scope.vehicleGrid = {
        showGridFooter: true,
        showColumnFooter: true,
        enableFiltering: true,
        exporterMenuCsv: true,
        enableGridMenu: true,
        columnDefs: [{
          field: 'company'
        }, {
          field: 'vehicleCode'
        }, {
          field: 'vehicleName'
        }, {
          field: 'regn_no'
        }, {
          field: 'vehicleType'
        }, {
          field: 'manufacturer'
        }, ],
        onRegisterApi: function(gridApi) {
          $scope.gridApi = gridApi;
        }
      }
      $scope.loadAll = function() {
        Vehicle.query({}, function(result, headers) {
          $scope.links = ParseLinks.parse(headers('link'));
          $scope.totalItems = headers('X-Total-Count');
          // $scope.users = result;
          $scope.vehicleGrid.data = result;
        });

      };

      $scope.loadAll();
    }

弹出屏幕的控制器。

angular.module('trackzApp').controller('VehicleMgmntAddDialogController', ['$scope', '$stateParams', '$mdDialog', '$mdMedia', 'Vehicle', 'Language',
  function($scope, $stateParams, $mdDialog, $mdMedia, Vehicle, Language) {

    // $scope.user = entity;
    $scope.authorities = ["ROLE_USER", "ROLE_ADMIN"];
    Language.getAll().then(function(languages) {
      $scope.languages = languages;
    });
    var onSaveSuccess = function(result) {
      $scope.isSaving = false;
      //$uibModalInstance.close(result);
      $mdDialog.hide();
    };

    var onSaveError = function(result) {
      $scope.isSaving = false;
    };


    $scope.save = function() {
      $scope.isSaving = true;
      /*if ($scope.user.id != null) {
          User.update($scope.user, onSaveSuccess, onSaveError);
      } else {*/
      Vehicle.save($scope.vehicle, onSaveSuccess, onSaveError);
      $scope.$parent.vehicleGrid.push(vehicle);
      // }

    };

    $scope.hide = function() {
      $mdDialog.hide();
    };
    $scope.cancel = function() {
      $mdDialog.cancel();
    };

    $scope.clear = function() {
      // $uibModalInstance.dismiss('cancel');
    };

  }
]);

Answer 1

1，我认为你有一个拼写错误的问题：

在您的VehicleMgmntController控制器中，从服务器返回的数据存储在：

  

$ scope.vehicleGrid.data = result;

但是在你的模态中，你想在vehicleGrid中推送一些东西，其中包含网格的设置数据而不是数据源。

$scope.save = function() {
      $scope.isSaving = true;
      /*if ($scope.user.id != null) {
          User.update($scope.user, onSaveSuccess, onSaveError);
      } else {*/
      Vehicle.save($scope.vehicle, onSaveSuccess, onSaveError);
      $scope.$parent.vehicleGrid.push(vehicle);
      //try this:
      $scope.$parent.vehicleGrid.data.push(vehicle);          
      // }

    };

我认为车辆服务会返回新添加的车辆，对吗？

2，我有一种感觉，你onSveSuccess的运行时间晚于你的Vehicle.save。您是否考虑过使用.then（）语法来处理promises？

$scope.save = function() {
      $scope.isSaving = true;
      /*if ($scope.user.id != null) {
          User.update($scope.user, onSaveSuccess, onSaveError);
      } else {*/
      Vehicle.save($scope.vehicle).then(function(result) {
             $scope.$parent.vehicleGrid.data.push(vehicle);
      }, function(error){
            //some error handling
      });

      // }

    };