Question

我一直在为我的网站开发一个投票功能，但是使用AngularJS的$资源更新，我希望用我刚录制的投票“更新”现有记录。问题是它没有更新并且没有给出任何错误消息，只是在控制台日志中声明我的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并拥有“成功”处理程序。这篇文章非常有帮助：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 PUT投票应用程序到REST服务

1 个答案: