AngularJS 将投票应用程序放入 REST 服务

Question

我一直在为我的网站开发投票功能，但我对使用 AngularJS 的 $resource 比较陌生，我正在寻找 "update" 我刚刚记录的投票的现有记录。问题是它没有更新，也没有给出任何错误消息，只是在控制台日志中说明我的 REST 调用需要 CORS 预检，这让我相信它至少会打到后端。

在开发的这个阶段，我相信我可能不知道如何使用 ID 更新记录，因为在这种情况下，我没有要传递的 $routeparam 以供参考，但我正在尝试更新来自具有投票功能的 ng-repeat。在屏幕上，它通过向上或向下递增来工作，但不会更新数据库，因此当我刷新页面时，更改不会保留，因为它们从未提交过。

这是我的 HTML:

<div ng-controller="articleVotingCtrl">
    <table class="table table-striped">
        <tr>
            <th>Votes</th>
            <th>Title</th>
            <th>Category ID</th>
        </tr>
        <tr ng-repeat="articlevote in articlevotes">
            <td>
                <div class="col-md-1 voting well">
                    <div class="votingButton" ng-click="upVote(articlevote);">
                        <i class="glyphicon glyphicon-chevron-up"></i>
                    </div>
                    <div class="badge badge-inverse">
                        <div>{{articlevote.articlevotes}}</div>
                    </div>
                    <div class="votingButton" ng-click="downVote(articlevote);">
                        <i class="glyphicon glyphicon-chevron-down"></i>
                    </div>
                </div>
            </td>
            <td>{{articlevote.articletitle}}</td>
            <td>{{articlevote.articlecategoryid}}</td>
        </tr>
    </table>
</div>

这是我的控制器（这可能是问题所在，或者与我的服务相结合）：

// Article Vote
pfcControllers.controller('articleVotingCtrl', ['$scope', 'pfcArticles', function($scope, pfcArticles) {
    $scope.articlevotes = pfcArticles.query();

    $scope.upVote = function(articlevote) {
        articlevote.articlevotes++;
        updateVote(articlevote.id, articlevote.articlevotes);
    };

    $scope.downVote = function(articlevote) {
        articlevote.articlevotes--;
        updateVote(articlevote.id, articlevote.articlevotes);
    };

    function updateVote(id, articlevotes) {
        pfcArticles.update({
            articleID: id
        }), articlevotes;
    }
}]);

这是我的服务：

 // All Articles
 pfcServices.factory('pfcArticles', ['$resource', function($resource) {
     return $resource('https://myrestcall.net/tables/articles', { articleID: '@id' }, {
         'update': {
             method: 'PATCH'
         }
     });
 }]);

这是示例 JSON 数据：

[
  {
  "id": "66D5069C-DC67-46FC-8A51-1F15A94216D4",
  "articletitle": "artilce1",
  "articlecategoryid": 1,
  "articlesummary": "article 1 summary. ",
  "articlevotes": 1
  },
  {
  "id": "66D5069C-DC67-46FC-8A51-1F15A94216D5",
  "articletitle": "artilce2",
  "articlecategoryid": 2,
  "articlesummary": "article 2 summary. ",
  "articlevotes": 3
  }, 
  {
  "id": "66D5069C-DC67-46FC-8A51-1F15A94216D6",
  "articletitle": "artilce3",
  "articlecategoryid": 3,
  "articlesummary": "article 3 summary. ",
  "articlevotes": 0
  },   
  {
  "id": "66D5069C-DC67-46FC-8A51-1F15A94216D7",
  "articletitle": "artilce4",
  "articlecategoryid": 1,
  "articlesummary": "article 3 summary. ",
  "articlevotes": 5
  }, 
]

Answer 1

我通过调整服务以接受一个 id 并更改我的 updatevote 函数以接收范围内的 id 并拥有一个 "success" 处理程序来让它工作。这个 post 很有帮助：AngularJS: Understanding this PUT example

我现在的服务如下：

pfcServices.factory('pfcArticles', ['$resource', function ($resource) {
    return $resource('https://myrestcall.net/tables/articles/:articleID', { articleID: '@id' },
    {
        'update': { method: 'PATCH' }
    }
    );
}]);

控制器设置为：

pfcControllers.controller('articleVotingCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) {

$scope.articlevotes = pfcArticles.query();

// Voting function
$scope.upVote = function (articlevote) {
    articlevote.articlevotes++;
    var id = articlevote.id;
    var articlevotes = articlevote.articlevotes;
    updateVote(id, articlevotes);
};
$scope.downVote = function (articlevote) {
    articlevote.articlevotes--;
    var id = articlevote.id;
    var articlevotes = articlevote.articlevotes;
    updateVote(id, articlevotes);
};

function updateVote(id, articlevotes) {
    var vote = pfcArticles.get({ articleID: id}, function () {
        vote.articlevotes = articlevotes;
        vote.$update();
    });
}
}]);

HTML没有调整。

AngularJS 将投票应用程序放入 REST 服务

AngularJS PUT on voting application to REST Service

javascript

rest

angularjs