AngularJS：将参数从控制器传递到服务

Question

我无法弄清楚如何将参数从我的 angular controller 传递到 service

#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
  }

}]);

我在这里要做的是，从我的表单和控制器中获取$scope.formData 应该将其传递给service，据我了解，我不能在service 中使用$scope，所以我需要找到将$scope.formData 传递给服务的方法

很难的想法是，在控制器中，recipeService.saveRecipe($scope.formData);，但我不确定如何从服务中收集它，

当我更改服务this.saveRecipe(val) = save; 时它不起作用:(

任何帮助都会得到帮助

Answer 1

这个例子演示了 Angular 应用的正确结构：

• 控制器内部的模型初始化
• 服务单例的实现，并注入到您的控制器中
• 使用 $http 承诺异步调用 Web API 调用，并允许服务的调用者处理他们的成功/失败。
• 使用“controller as”语法从控制器公开函数，而不是直接从作用域公开函数。
• 双向数据模型绑定（文本框到食谱和食谱到文本框）

在控制器中初始化模型：

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!!!');
           });

      }
  }]);

在您的食谱服务中，定义 saveRecipe 函数：

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

}]);

将你的配方对象绑定到你的视图；添加一个按钮来调用 saveRecipe 控制器函数并保存配方（传入模型配方对象）：

<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>

Answer 2

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
        }

}

稍后在您的控制器中注入 服务 ExampleServices

然后访问：

ExampleServices.create(params)

params 可以是任何对象，很可能是使用表单捕获的数据。

ExampleServices.remove(id)

id 可以是要从数据库中删除的记录的主要 id。

希望有帮助:)