Question

我已经将角度模态作为指令。我的目标是使用给定的表单数据向json文件发出post请求。我不知道如何设置发布请求。我读到$ http为我处理JSON.stringify（）所以我不需要为帖子配置数据。我也想知道我是否需要设置标题？以下是我的大部分数据。

我创建了一个json文件来保存一个我从中获得啤酒列表的数组。

addBeer（）函数是理想情况下在工厂中发出post请求的地方

现在我正在设置我的功能

function addBeer() {
            return $http.post(url,{
                data: JSON.stringify({}),
                headers: {'Content-Type': 'application/json'}
            })
            .then(function(response) {
                console.log('response', response);
            })


        }

这将是工厂的一部分。在整个工厂，我遵循约翰爸爸风格指南。 getBeerList（）获取整个json文件，而 getBeer（）获取我正在寻找的每一种啤酒。

   (function() {
    'use strict';
    angular
        .module('beerApp.services.beerList',[])
        .factory('beerListFactory', beerListFactory);

        beerListFactory.$inject = ['$http', '$log'];

        function beerListFactory($http, $log) {
            var url = './app/Services/IBU_list.json';

            return {
                getBeerList: getBeerList,
                getBeer: getBeer,
                addBeer: addBeer

            }

            function getBeerList(){

                return $http.get(url, {catch: true})
                    .then(getBeerListComplete)
                    .catch(getBeerListFailed);

                    function getBeerListComplete(response) {

                        return response.data;
                    }

                    function getBeerListFailed(error) {
                        console.log('error', error);
                    }
            }

            function getBeer(id) {
                return $http.get(url, {
                    catch: true
                })
                .then(getBeerComplete)

                function getBeerComplete(response) {
                    console.log('promise', id);
                    console.log('response', response.data.length);
                    var data = response.data;
                    for(var i =0, len=data.length;i<len;i++) {
                        console.log(typeof data[i].id)
                        if(data[i].id == parseInt(id)) {
                            console.log('data i',data[i]);
                            return data[i];
                        }
                    }
                } // end of getBeerComplete
            } //end of getBeer

            function addBeer() {
                return $http.post(url,{
                    data: JSON.stringify({}),
                    headers: {'Content-Type': 'application/json'}
                })
                .then(function(response) {
                    console.log('response', response);
                })


            }
        } // end of beer Factory
})();

总体目标是推入具有如此设置对象的json数组：

{
"id" : "4",
"BeerStyle": "American Light Lager",
"IBU": "8-17",
"list" : {"drinks": []}

}，

表格中的每种饮料都应该进入“饮料”阵列

我的模态实例控件内部我正在检查我用

设置的表单值

vm.newBeer = {};

这是我注释掉addBeer函数的函数，但这是我理想情况下对post请求的作用

function ModalInstanceCtrl( $scope,$modalInstance) {

            var vm = this;
            vm.ok = ok; 
            vm.cancel = cancel; 
            vm.newBeer = {};
            // vm.addBeer = function() {

            // }

            function ok () {
                console.log('new beer', vm.newBeer);
                // console.log('IBU',$scope.IBU);
                console.log('clicked');
                $modalInstance.close();
            };

            function cancel() {
                console.log('beer', vm.newBeer);

                console.log('clicked');
                $modalInstance.dismiss('cancel');
            };
        }

我正确地获取控制台内的值

<input type="text" class="form-control" placeholder="beer" ng-model="vm.newBeer.beerName">

在我的指令I指令中，我正在调用我为一杯啤酒做的获取请求。我这样做是为了确保我已经设置好并且可以连接到控制器。我认为发布请求将在决议中发生。

   function ModalController($modal, $log , $scope, beerListFactory, $stateParams) {
            var vm = this;

            vm.animationsEnabled = true;
            vm.open = open;

            function open() {
                var modalInstance = $modal.open({
                    animation: vm.animationsEnabled,
                    templateUrl: 'app/components/modal/modal.html',
                    controller: ModalInstanceCtrl,
                    controllerAs: 'vm',
                    bindToController: true,
                    size: 'lg'
                    // resolve: {
                    //  title: function() {
                    //      return 'training Info';
                    //  }
                    // }            
                });
                modalInstance.result.then(function(selectedItem) {
                    $log.info('beer in modal',beerListFactory.getBeer($stateParams.beerId) );

                    console.log("Confirmed: "+ selectedItem);
                    $scope.selectedItem = selectedItem;
                }, function() {
                    $log.info('modal dismissed at: ' + new Date());
                });
            };

Answer 1

如果您使用的是JSON，我建议您使用Angular的$resource工厂。

返回的资源对象具有提供的操作方法高级行为，无需与低级别交互 $ http服务。

您可以使用$http.get()和$http.post()，而不是Beer.query()和Beer.save()。 $resource专为像您这样的服务而设计。

Answer 2

我终于成功了。

<强> HTML

<!--MODAL WINDOW for item details -->
     <script type="text/ng-template" id="itemModalContent.html">
        <div class="modal-dialog " ng-class="{fadeOut: startFade}" ng-hide="hidden">
             <div class="modal-content">
                  <div class="modal-header">
                       <button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"><i class="fa fa-close"></i></button>
                       <span class="item-name">{{item.name}}</span>
                  </div>
                  <div class="modal-body">
                       <p class="description">{{item.description}}</p>
                       <input type="hidden" ng-model="item.uniqueid" id="itemid" value="{{item.courseid}}" name="itemid"/>
                       <p class="response"> {{PostDataResponse}}</p>
                       <p class="error"> {{ResponseDetails}}</p>
                   </div>
                   <div class="modal-footer">
                        <button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
                        <button type="button" class="button ok btn-primary" ng-click="confirm()">Sign me up</button> 
                  </div>
               </div>
           </div>
      </script>

<强>角

myApp.controller('itemModalInstanceCtrl', function ($http, $scope, $uibModalInstance, $timeout, item) {
    $scope.item = item;
    $scope.cancel = function () {
        $uibModalInstance.dismiss();
        $('.overlay').hide();
    };

    updateUrl = '<your URL to post to>';

    $scope.confirm = function () {

        var myItemId = $scope.item.uniqueid;

       // use $.param jQuery function to serialize data from JSON
        var data = $.param({
            uniqueid: myItemId
        });
            var config = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }

            $http.post(updateUrl, data, config)
            .success(function (data, status, headers, config) {
                alert(JSON.stringify(data));
                $scope.PostDataResponse = "You have signed up!";
            })
            .error(function (data, status, header, config) {
                $('.response').addClass('error');
                $scope.ResponseDetails = "data: " + data +
                        "<br />status: " + status +
                        "<br />headers: " + header +
                        "<br />config: " + config;
            });
            $timeout(function() {
                $uibModalInstance.close({});
                $('.overlay').hide();
            }, 3000);
    };

});

秘诀不是将$scope或$http注入传递给确认功能，而是在功能内引用$scope.item.property 完整。希望这有助于某人！

用角度ui-modal发出帖子请求

2 个答案: