使用 AngularJS ui-grid $scope.saveRow 保存行数据答案

【问题标题】：Saving row data with AngularJS ui-grid $scope.saveRow使用 AngularJS ui-grid $scope.saveRow 保存行数据
【发布时间】：2014-12-09 15:49:17
【问题描述】：

我正在开发一个小型前端应用程序，它将在 ui-grid 中显示各种产品运输数据。

我有以下代码：

HTML：

<body ng-controller="MyCtrl">

    <p ng-repeat="row in myData">{{row.name}} works at {{row.company}}</p>

    <button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button>  <span ng-bind="currentFocused"></span>
    <br/>
    <br/>
    <div id="grid1" ui-grid="gridOptions" external-scopes="editRows" ui-grid-edit ui-grid-row-edit ui-grid-pinning ui-grid-paging ui-grid-cellnav class="grid"></div>

</body>

AngularJS：

var app = angular.module('webapps', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.pinning', 'ui.grid.paging', 'ui.grid.cellNav']);

app.controller('MyCtrl', ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {

 //Column definitions
    $scope.columns = [
        { field: 'name', displayName: 'First Name', width: 300},
        { field: 'lastname', displayName: 'Last Name', width: 300 },
        { field: 'email', displayName: 'Email', width: 300 },
        { field: 'company', displayName: 'Company', width: '50%' }
    ];

    //Options for displaying the grid
    $scope.gridOptions = {
        data: 'myData',
        enableCellEditOnFocus: false,
        pagingPageSizes: [2, 5, 7],
        pagingPageSize: 5,
        enableSorting: true,
        enableGridMenu: true,
        columnDefs: $scope.columns,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            //var cellTemplate = '<button class="btn primary" ng-click="getExternalScopes().showMe(rowCol.row.entity)">Edit</button>'; //'ui-grid/selectionRowHeader';   // you could use your own template here
            //$scope.gridApi.core.addRowHeaderColumn({ name: 'rowHeaderCol', displayName: '', width: 50, pinnedLeft: true, cellTemplate: cellTemplate });
            gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
        }
    };

    // Save row data on edit 1 - TESTING
    $scope.saveRow = function (rowEntity) {
        // create a fake promise - normally you'd use the promise returned by $http or $resource
        var promise = $http.post("Webapps/Home/SaveRow");
        $scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise.promise);
        console.log(rowEntity);

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

我的问题是关于 $scope.saveRow 方法的。我查看了文档here 并尝试在 google 上搜索（对于 ui-grid 来说并不多），但我仍然遇到了死胡同，因为我对此有点缺乏经验，我不确定如何用承诺正确编码。

在此之后将运行一个 MVC 应用程序，它将处理将数据推送到前端并将表编辑保存到 SQLServer 数据库。显然，我想做的是让这个 $scope.saveRow 函数正确地将 rowEnttiy 数据发送回我的 MVC 应用程序，但是，我再次不知道如何编写函数。显然，示例中包含的“虚假”承诺不足以让我了解我需要做什么。我最初尝试了以下方法：

$scope.saveRow = function (rowEntity) {
    try {
        // Need actual URL for post...controller has to accept 'row'
        $http.post("Webapps/Home/SaveRow", { row: rowEntity }).success(function (data, status, headers, config) {
            console.log("post success");
            console.log(rowEntity);
        }).error(function (data, status, headers, config) {
            console.log("post failure");
            console.log(rowEntity);
        });
    } catch (e) {
        alert("Something went wrong");
    }
};

但这只会在我的控制台中引发异常，即引发 saveRow 事件时未返回承诺。

【问题讨论】：

标签： angularjs angular-ui angular-ui-grid

【解决方案1】：

您通常会在单独的存储库中执行 promise/api 调用，但您要查找的代码基本上是这样的：

 $scope.saveRow = function( rowEntity ) {

    var promise = $scope.someRepositoryFunction(rowEntity);
    $scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise);

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

$scope.someRepositoryFunction = function(row) {
    return $http.put('/Home/UpdateRow',row);
}

【讨论】：

由于某种原因，文档中缺少setSavePromise 方法的$scope.gridApi.grid 部分，因此感谢您发布此内容。我已经用头撞墙了一个多小时，试图让它发挥作用。
没有理由创建新的承诺。只需返回 $http 提供的承诺
为了澄清，@codemonkey 的评论提到了这个答案的早期版本，现在已经更正了。谢谢@codemonkey！
您是否需要 $scope.gridApi.grid 参数才能使其工作？
@DauleDK 我能够在没有 $scope.girdApi.grid 参数的情况下触发我的呼叫

【解决方案2】：

我不能发表评论，所以我必须提交答案。上面的答案是不正确的，因为 setSavePromise 函数的 $scope.gridApi.grid 参数不是必需的。尽管该函数确实需要一个网格参数，但它是由包装器在 .apply 调用期间添加的。

【讨论】：

【解决方案3】：

我实际上使用了 punkologist 提交的代码，它确实可以工作，但在包含 $interval 后，控制台中似乎出现了解决 promise 的错误。

我猜以下是使其无错误运行的适当代码。希望它有效。

$scope.saveRow = function( rowEntity ) {

var promise = $q.defer();
$http.put('/Home/UpdateRow',row).success(function(){
$interval(function(){
     promise.resolved();
     },3000, 1)
}).error(promise.reject);

$scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise);
};

【讨论】：