When it comes to editing object details, I rely on the ui bootstrap modal directive. Using the same controller for adding new entities or editing existing ones has worked well so far. However, a problem arises when updating an existing object. The current code pushes the updated object to the array, but not to the database. This results in duplicates of the old and new records in the array. Upon refreshing, the old duplicate disappears as the controller queries the actual array again.
$scope.openSaleDlg = function (saleId) {
var modalInstance = $modal.open({
backdrop: 'static',
templateUrl: '/sales/detail.html',
controller: 'SaleDetailCtrl',
scope: $scope,
resolve: {
saleId: function () {
return saleId;
}
}
});
modalInstance.result.then(
function (sale) {
$scope.sales.push(sale)
}
);
};
A potential solution could be to have the .then method execute $scope.sales = Sale.query(); upon success. However, there may be a more efficient way to update the object in the list without querying the database again.