web-dev-qa-db-ja.com

AngularJS：コントローラーからサービスにパラメーターを渡す

angularcontrollerから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;それは機能しません:(

どんな助けも適用されます

angularjsangularjs-scopeangularjs-serviceangularjs-controller
8
sameera207

この例は、angular app：

  • コントローラ内のモデルの初期化
  • サービスシングルトンの実装、およびコントローラーへの注入
  • $ httpを使用すると、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>
19
pixelbits
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
        }

}

後でコントローラーにservice ExampleServicesを挿入します

そして、アクセスします：

ExampleServices.create(params)

paramsは任意のオブジェクトであり、おそらくフォームを使用してキャプチャされたデータです。

ExampleServices.remove(id)

idは、データベースから削除されるレコードのプライマリIDである可能性があります。

お役に立てば幸いです:)

1
Coder John