AngularJS:将params从控制器传递到服务

栏目: 编程语言 · AngularJS · 发布时间: 5年前

内容简介:翻译自:https://stackoverflow.com/questions/25881804/angularjs-passing-params-from-controller-to-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并且控制器应该将其传递给服务,根据我的理解,我不能在服务中使用$scope所以我需要找到一种传递$的方法scope.formData到服务

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

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

任何帮助都会得到满足

此示例演示了角度应用程序的正确结构:

>控制器内的模型初始化

>实现服务单例,并注入您的控制器

>使用$http promises异步调用Web API调用,并允许服务的调用者处理其成功/失败.

>使用“控制器作为”语法从控制器公开函数,而不是直接从作用域公开函数.

>双向数据模型绑定(文本框到配方和配方到文本框)

在控制器中初始化模型:

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>

翻译自:https://stackoverflow.com/questions/25881804/angularjs-passing-params-from-controller-to-service


以上所述就是小编给大家介绍的《AngularJS:将params从控制器传递到服务》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法竞赛入门经典

算法竞赛入门经典

刘汝佳、陈锋 / 2012-10 / 52.80元

《算法竞赛入门经典:训练指南》是《算法竞赛入门经典》的重要补充,旨在补充原书中没有涉及或者讲解得不够详细的内容,从而构建一个较完整的知识体系,并且用大量有针对性的题目,让抽象复杂的算法和数学具体化、实用化。《算法竞赛入门经典:训练指南》共6章,分别为算法设计基础、数学基础、实用数据结构、几何问题、图论算法与模型和更多算法专题,全书通过近200道例题深入浅出地介绍了上述领域的各个知识点、经典思维方式......一起来看看 《算法竞赛入门经典》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换