AngularJS PUT on voting application to REST Servic

2019-06-13 05:09发布

问题:

I have been developing a voting function for my Website, but am newer to using AngularJS's $resource and am looking to "update" an existing record with the vote I just recorded. The issue is that it is not updating and is not giving any error messages, merely stating in the console log that my REST call required CORS preflight, which leads me to believe it is at least hitting the backend.

At this point in development, I believe I may be off on how to update a record with an ID, as in this case, I don't have a $routeparam to pass in for reference but am trying to update from an ng-repeat that has the voting functionality as part of it. On screen it works by incrementing up or down, but does not update the database so that when I refresh the page, the changes don't hold because they were never committed.

Here is my 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>

Here is my controller (which is where the issue probably is, or in combination with my service):

// 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;
    }
}]);

Here is my service:

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

Here is sample JSON data:

[
  {
  "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
  }, 
]

回答1:

I got it working by adapting the service to accept an id and changing my updatevote function to receive the scoped id and to have a "success" handler. This post was very helpful: AngularJS: Understanding this PUT example

My service is now as follows:

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

And the controller is set to:

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();
    });
}
}]);

There were no adjustments to the HTML.