使用服務和控制器向服務器發送數據

Question

我想從客戶端向服務器端發送一些數據。我想通過使用服務和控制器來發送這些數據。但數據不會傳遞到服務器端，

這是我view.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); 
     } 
    } 
    } 
})(); 

我的目標是從用戶那裏得到一些輸入並將其發送到服務器，我想使用服務和控制器。請幫忙解決這個問題

Answer 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; 
     }) 
    } 

};