6

Sto avendo difficoltà a capire come passare parametri dal mio angularcontroller a serviceAngularJS: passando params dal controller al servizio

#my controller 
'use strict'; 

angular.module('recipeapp') 
    .controller('recipeCtrl', ['$scope', 'recipeService', 
    function($scope, recipeService){ 
     $scope.recipeFormData={}; 
     $scope.recipeSave = function(){ 
     recipeService.saveRecipe(); 
     } 


    }]); 

#my service 
'use strict'; 
angular.module('recipeapp').service('recipeService',['$http', function($http){ 

    this.saveRecipe = save; 

    function save(callback){ 
    //calling external http api 
    } 

}]); 

Quello che sto cercando di fare qui è, ottenendo il $scope.formData dalla mia forma e di controllo dovrebbero passare che a service, Come per la mia comprensione, non posso usare $scope all'interno del service quindi ho bisogno di trovare un modo di passare $scope.formData al servizio

Idea duro sarebbe, nel controller, recipeService.saveRecipe($scope.formData); ma non sono sicuro come raccogliere che dal servizio,

quando ho cambiato il servizio this.saveRecipe(val) = save; che non funziona :(

qualsiasi aiuto sarebbe appriciated

+0

Il salvataggio non è indefinito quando viene assegnato a saveRecipe. Metti il ​​compito dopo la funzione di salvataggio.Inoltre, normalmente non è necessario costruire manualmente formData. Di solito uno si legherebbe ad un modello e poi passerebbe il modello per salvare la funzione di precipice – pixelbits

+0

Passa la tua variabile come parametro – Satpal

+0

@pixelbits, grazie per la risposta .. Ho un modello che lega i valori dal modulo. quello che non riesco a capire è come passare il modello alla funzione 'saveRecipe' nel servizio ?! – sameera207

risposta

16

Questo esempio dimostra la corretta struttura di un app angolare: l'inizializzazione

  • modello dentro il controller
  • realizzazione di un servizio singleton e iniezione nel controller
  • L'utilizzo di $ http promette di richiamare le chiamate API Web in modo asincrono e di consentire ai chiamanti del servizio di gestire il loro successo/fallimento.
  • Utilizzo del modo "sintonizzatore" del sintattore per l'esposizione delle funzioni dal controller piuttosto che l'esposizione delle funzioni direttamente dall'ambito.
  • modello di dati a due vie di legame (testo-to-ricetta e ricetta-a-box)

inizializzare il vostro modello entro il controller:

angular.module('recipeapp') 
    .controller('recipeCtrl', ['$scope', 'recipeService', 
    function($scope, recipeService){ 
     // initialize your model in you controller 
     $scope.recipe={}; 

     // declare a controller function that delegates to your service to save the recipe 
     this.saveRecipe = function(recipe) { 
      // call the service, handle success/failure from within your controller 
      recipeService.saveRecipe(recipe).success(function() { 
       alert('saved successfully!!!'); 
      }).error(function(){ 
       alert('something went wrong!!!'); 
      }); 

     } 
    }]); 

Nella tua ricetta servizio, definire il saveRecipe funzione:

angular.module('recipeapp').service('recipeService',['$http', function($http){ 

    // expose a saveRecipe function from your service 
    // that takes a recipe object 
    this.saveRecipe = function(recipe){ 
     // return a Promise object so that the caller can handle success/failure 
     return $http({ method: 'POST', url: '/api/recipe/add', data: recipe}); 
    } 

}]); 

Legare l'oggetto della ricetta alla vista; aggiungere un pulsante per richiamare la funzione di controllo saveRecipe e salvare la ricetta (passando l'oggetto modello di ricetta):

<div ng-app="recipeapp" ng-controller="recipeCtrl as ctrl"> 
    <form name="recipeForm"> 
    Recipe Name: <input type="text" ng-model="recipe.name" /> 
    <button ng-click="ctrl.saveRecipe(recipe)">Save Recipe</button> 
    </form> 
</div> 
+0

funziona perfettamente, grazie mille: D, abbastanza nuovo per 'angolare' e ancora imparando :) – sameera207

1
var module = angular.module('example.service', []); 


module.services('ExampleServices', ['$http', '$q', function ($http, 
$q) { 

    var resourceUrl; 

    return { 


     setResourceUrl: function(resourceUrl) { 
      this.resourceUrl = resourceUrl; 
     }, 



     create: function(params) { 
      //access params here sent from controller 
      //make call to server using $http 
      //return back the promise or response 
     }, 



     remove: function(id) { 
      //access id here sent from controller 
      //make call to server using $http 
      //return back the promise or response 
     } 

} 

avanti nel controller di iniettare il ExampleServices servizio

e quindi accedere:

ExampleServices.create(params) 

i parametri possono essere qualsiasi oggetto, molto probabilmente i dati acquisiti tramite moduli.

ExampleServices.remove(id) 

id potrebbe essere l'id principale del record da rimuovere dal database.

Spero che questo aiuti :)

+0

Grazie per la formattazione @Tetiana Chupryna –

+0

My pleasure @Coder John –