javascript - Angular $HTTP 发布 - 动态 URL 和定义发布

Question

我正在尝试将一个简单的二进制值(使用 $http)发布到由我的 HTML 中的值定义的 URL。

我已成功获取正在传递的“card.id”(可以在控制台日志中看到它)

                <td-card ng-repeat="card in cards"
                         on-destroy="cardDestroyed($index)"
                         on-swipe="cardSwiped($index)"
                         on-swipe-right="$parent.cardSwiped(card.id)"
                         on-swipe-left="$parent.cardSwiped(card.id)" >

我想要发布的数据需要发送到其中包含card.id的URL。

如何告诉它要发布什么内容以及如何触发？

.controller('CardsCtrl', ['$scope', 'TDCardDelegate', 'cardsApi', '$http',
    function($scope, TDCardDelegate, cardsApi, $http) {
       console.log('CARDS CTRL');
        $scope.cards = [];

        $scope.onSwipeRight=function(product_id){console.log(product_id)}
        //Post for swipe right {'like':1, 'uid':21}

        $scope.onSwipeLeft=function(product_id){console.log(product_id)}
        //Post for swipe left {'like':0, 'uid':21}

             for(var i = 0; i < 7; i++) {
                 cardsApi.getApiData()
                     .then(function (result) {
                         $scope.cards.unshift(result.data);
                         $scope.product_id = result.data.product_id;
                     })
                     .catch(function (err) {
                         $log.error(err);
                     });
             }

             $scope.$watchCollection('cards', function (newVal, oldVal) {
                 if(newVal < oldVal) {
                     cardsApi.getApiData()
                         .then(function (result) {
                             $scope.cards.unshift(result.data);
                         })
                         .catch(function (err) {
                             console.log(err);
                         });
                 }
             });

             $scope.cardSwiped = function(card) {
         console.log('here');
         console.log(card);
       };
         //Removes card from top of stack
         $scope.cardDestroyed = function(index) {
             $scope.cards.splice(index, 1);
         };

         $scope.addCard = function() {
             var newCard = $scope.cards[$scope.cards.length];
             //newCard.id = Math.random();
             $scope.cards.push(angular.extend({}, newCard));
         };

        $scope.postRecordLikes = function(product_id){
            console.log(product_id)
            $http.post('http://test.com/analytic/' + product_id)
                .then(function successCallback(product_id) {
                    // this callback will be called asynchronously
                    // when the response is available
                }, function errorCallback(response) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                });
        };
    }
])

Answer 1

postRecordLikes 已被定义但从未使用。您可以通过不同的方式在 html 中调用它。例如，如果您想在单击时调用它，只需使用 ng-click 即可。

顺便说一句，在 Controller 内调用 $http 并不是一个好的做法，请查看这篇文章:https://toddmotto.com/resolve-promises-in-angular-routes/

编辑

我已经 fork 了你的 plunkr。看看吧:http://plnkr.co/edit/uvooKeCtFagAnFjVYnhS?p=preview

您应该在事件触发时调用 postRecordLikes。根据需要修改它。