使用服务和控制器向服务器发送数据答案

【问题标题】：sending data to server using services and controllers使用服务和控制器向服务器发送数据
【发布时间】：2015-11-18 18:30:44
【问题描述】：

我想将一些数据从客户端发送到服务器端。我想通过使用服务和控制器来发送这些数据。但是数据不会传到服务器端，

这是我的视图.html

<section class="af-wrapper">
  <h3 id="addStyles">ADD STYLES</h3>

  <form class="af-form" id="af-form" novalidate>

    <label for="input-name" class="header">Header Image</label>
    <input type="file" fileread="styles.uploadme"/>
    <b id="preview">Preview:</b>
    <img src="{{styles.uploadme}}" ng-model="styles.vm.uploadme" width="100" height="50" alt="Image preview...">
    <div style="white-space:nowrap">
      <label for="myColor" class="background">Background</label>
      <color-picker ng-model="styles.myColor" class="colorPicker"></color-picker>
    </div>
    <br />
    <label for="fonts" class="fontTitles">Font Titles</label>
    <div ng-controller="StylesCtrl">
      <div id="fontDropDown">
        <select ng-options="font for font in fonts" ng-model="styles.textSize.font"></select>
      </div>
      <br />
      <h3 ng-style="{'font-family': styles.textSize.font, 'font-size': styles.textSize.size + 'px'}">Text Is</h3>
      <div class="fontSize">Font Size Slider</div>
      <br />
      <input class="slider" min="12" max="24" ng-model="styles.textSize.size" type="range">
    </div>
    <input type="submit" ng-click='addStyles(styles)' value="Add Styles"/>
  </form>
</section>

这是我获取字体和字体大小的控制器

(function () {
  'use strict';

    angular.module("appBuilderApp").controller("StylesCtrl",
      ["$scope",StylesCtrl]);

      function StylesCtrl($scope) {
        $scope.fonts = [
            "Arial",
            "Tahoma"
        ];

        $scope.textSize = {
            font: "Arial",
            size: 18
        };
      }
})();

这是我发送数据的控制器

(function() {
    'use strict';
    angular.module('appBuilderApp').controller('TemplateEditorCtrl', [
        '$scope', '$auth', '$http', '$sce', 'constants', '$stateParams', 'ngDialog', 'SERVER_URL', 'alert', 'FileUploader', 'Upload','appStylesResource',
        TemplateEditorCtrl
    ]);

    function TemplateEditorCtrl($scope, $auth, $http, $sce, constants, $stateParams, ngDialog, SERVER_URL, alert, FileUploader, Upload,appStylesResource) {

 appStylesResource.getFonts()
        .success(function(data) {
          $scope.addStyles = data;
        });


     $scope.addStyles = function(styles) {

       header:styles.uploadme;
       color: styles.myColor;
       font: styles.textSize.font;
       fontSize: styles.textSize.size;

       console.log(styles);

       if(styles != null){
         appStylesResource.addFonts($scope.header)
           .success(function(data){
             $scope.addStyles = {};
             $scope.addStyles = data;
           })
       }

     };
 }

})();

这是我的服务

(function(){
  'use strict';
  angular.module('appBuilderApp').service('appStylesResource',[
    '$http', 'SERVER_URL',appStylesResource]);

  function appStylesResource($http,SERVER_URL){
    return {
      getFonts : function() {
        return $http.get(SERVER_URL + 'api/templateEdit/addStyles');
      },
      addFonts : function(fontData){
        return $http.post(SERVER_URL + 'api/templateEdit/addStyles' + fontData);
      }
    }
  }
})();

我的目标是从用户那里获取一些输入并将其发送到服务器，我想为此使用服务和控制器。请帮忙解决这个问题

【问题讨论】：

标签： angularjs node.js angular-services node-modules

【解决方案1】：

请修正这行代码。

return $http.post(SERVER_URL + 'api/templateEdit/addStyles' + fontData);

到

return $http.post(SERVER_URL + 'api/templateEdit/addStyles' ,  fontData);

看看下面的变化

 $scope.addStyles = function(styles) {
   $scope.header = {
             header:styles.uploadme,
             color: styles.myColor,
             font: styles.textSize.font,
             fontSize: styles.textSize.size
   };
    console.log(styles);

   if(styles){
     appStylesResource.addFonts($scope.header)
       .success(function(data){
         $scope.addStyles = {};
         $scope.addStyles = data;
       })
   }

 };

【讨论】：