無法在Angular UI Grid中的可擴展行中保存行

Question

我正在嘗試將行保存功能與可擴展網格結合使用。 目標是能夠獨立於父行保存子網格行。

$scope.gridOptions = {
  expandableRowTemplate: 'components/grid/orderLineTemplate.html',
  expandableRowHeight: 150,

  expandableRowScope: {
    subGridVariable: 'subGridScopeVariable'

  },
  columnDefs: [
    {field: '_id'},
    {field: 'number'}
  ]
};

$http.get(ORDER_API)
  .success(function (data) {
    for (var i = 0; i < data.length; i++) {
      var rowScope = data[i];
      rowScope.subGridOptions = {
        appScopeProvider: $scope,
        columnDefs: [
          {field: 'amount'},
          {field: 'packageAmount'},
          {field: 'carrierAmount'}
        ],
        data: rowScope.orderLines,
        saveRow : $scope.saveRow
      }
    }
    $scope.gridOptions.data = data;
  });

$scope.gridOptions.onRegisterApi = function (gridApi) {
  $scope.gridApi = gridApi;
  gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};

$scope.saveRow = function (order) {
  var promise = $q.defer();
  $scope.gridApi.rowEdit.setSavePromise(order, promise.promise);
  if(order.number) {
    $http.put(ORDER_API + '/' + order._id, order).success(function () {
      promise.resolve();
    }).error(function () {
      promise.reject();
    });
  }

}
});

當我在父行中編輯字段時，會正確調用saveRow函數。 當我編輯子行中的字段時，控制台中會顯示以下消息;
'當saveRow事件被引發時，沒有返回一個promise，或者沒有人正在偵聽事件，或者事件處理程序沒有返回一個promise'
永遠不會為擴展的子行調用SaveRow。

Answer 1

您需要注冊子網格API。 每個網格都有自己獨立的API實例，您可以使用它與之通信：

rowScope.subGridOptions = {
  appScopeProvider: $scope,
  columnDefs: [
    {field: 'amount'},
    {field: 'packageAmount'},
    {field: 'carrierAmount'}
  ],
  data: rowScope.orderLines,
  saveRow : $scope.saveRow,
  onRegisterApi: function (gridApi) {
    gridApi.rowEdit.on.saveRow($scope, $scope.saveRow)
  }
}

這很接近，但是您使用appScopeProvider將我們的控制器作用域注入到子網格范圍中，您實際上並不需要這樣做。 相反，我們可以使saveRow通用並將其綁定到我們想要的gridApi。 bind()的第一個參數為函數設置this 。 我們只是傳入網格對象，但我們不需要它。 bind的第二個參數將是我們想要傳遞的gridApi。 然后在saveRow定義中，我們知道我們將接收正確的API作為第一個參數，然后將rowEntity作為第二個參數。

// Main grid:
$scope.gridOptions.onRegisterApi = function(gridApi) {
  gridApi.rowEdit.on.saveRow($scope, saveRow.bind(gridApi.grid, gridApi));
};

// Subgrids:
onRegisterApi: function(gridApi) {
  gridApi.rowEdit.on.saveRow($scope, saveRow.bind(gridApi.grid, gridApi));
}

// Altered saveRow:
function saveRow(gridApi, rowEntity) {
  var promise = $q.defer();
  gridApi.rowEdit.setSavePromise( rowEntity, promise.promise );

  // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
  $interval( function() {
    if (rowEntity.gender === 'male' ){
      promise.reject();
    } else {
      promise.resolve();
    }
  }, 3000, 1);
};

由於您可能對子網格有不同的保存功能，因此要記住的主要事情是使用onRegisterApi在其上注冊“saveRow”事件

這是一個展示上述代碼的工作人員： http ：//plnkr.co/edit/52mp9C？p = preview

Answer 2

如果您使用Angular $ http或$ resource，則無需創建任何其他“延遲”對象，只需返回結果：

$scope.saveRow = function (order) {
    // with use $http
    var promise = $http.put(ORDER_API + '/' + order._id, order);
    // or with use $resource
    var promise = $resource(ORDER_API + '/:id').save({ id: order._id }, order).$promise;
    $scope.gridApi.rowEdit.setSavePromise(order, promise);
    return promise;
  }

Answer 3

您已在代碼中創建了延遲承諾。 由於錯誤明確表示您需要返回一個承諾，您應該添加return deferred.promise; 你的代碼。 我認為你也應該從else語句返回一個諾言，以便無論如何都能得到諾言的解決/拒絕。

碼

$scope.saveRow = function(order) {
    var deferred = $q.defer();
    $scope.gridApi.rowEdit.setSavePromise(order, promise.promise);
    if (order.number) {
        $http.put(ORDER_API + '/' + order._id, order).success(function() {
            deferred.resolve();
        }).error(function() {
            deferred.reject();
        });
    } else {
        deferred.reject();
    }
    return deferred.promise; //this will return promise to caller function.
};

希望這可以幫助你，讓我知道是否還需要其他任何東西。 謝謝。 :)