AngularJS PUT投票應用到REST服務

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中沒有調整。