CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Vishwajeet Vatharkar
Vishwajeet Vatharkar

Reputation: 1196

AngularJS : How to pass model data to service?

This is my controller

blogApp.controller('myController',
['$scope', 'myService', function ($scope, myService)
{
    $scope.logIn = myService.loginUser($scope.checkUser);
};
}]);

This is my view

<div>
    <input type="text" ng-model="checkUser.username">
</div>

This is my service

blogApp.service('myService', function ($rootScope)
{    
   this.loginUser = function() {
   someAPI.logIn(checkUser.username);
 }

It is showing error that checkUser is not defined.

Update: I updated my service code as follows:

this.loginUser = function(checkUser) {
       someAPI.logIn(checkUser.username);
     }

It is still not working.

Upvotes: 0

Views: 1275

Answers (4)

jnthnjns
jnthnjns

Reputation: 8925

AngularJS is great in the fact that if you declare a $scope variable in your html but not in your controller it will instantiate it for you as an empty string.

However you have $scope.checkUser as an Object (which is not instantiated), I think that is where your problem lies.

Try this

Controller:

blogApp.controller('myController', ['$scope', 'myService', function ($scope, myService) {

    $scope.checkUser = {};

    $scope.logIn = function () {
        myService.loginUser($scope.checkUser);
    };

}]);

Html:

<div>
    <input type="text" ng-model="checkUser.username">
    <button ng-click="login()">Log In</button>
</div>

Service:

blogApp.service('myService', function () {    
    return {
        loginUser: function(checkUser) {
            someAPI.logIn(checkUser.username);
        }
    }
}

Upvotes: 3

Patrick
Patrick

Reputation: 6948

$scope.checkUser is not defined when your controller is initially created as it is bound to your input box, which the user hasn't had a chance to type into yet. In this case, Angular won't create the $scope.checkUser object for you (nor the username property) until the user keys into the textbox. If you were to add a click handler to your controller, that should do the trick:

blogApp.controller('myController',
['$scope', 'myService', function ($scope, myService) {
    //make this a click handler
    $scope.logIn = function () {
       //Make sure the user typed something
       if ($scope.checkUser) {
           myService.loginUser($scope.checkUser);
       }
    }
}]);

And your view:

<div>
    <input type="text" ng-model="checkUser.username">
    <button type="button" ng-click="logIn">Log In</button>
</div>

Upvotes: 0

wiherek
wiherek

Reputation: 1923

You need to have the function you call grab the parameter that you pass:

blogApp.service('myService', function ($rootScope)
{    
  this.loginUser = function(checkUser) {
    someAPI.logIn(checkUser.username);
  };
});

Upvotes: 3

Thor
Thor

Reputation: 291

something like this should do the trick

// Service
blogApp.service("myService", function(){

    // Save the settings
    this.saveSettings= function(username){
         // Save your stuff here
    };
}
// in controller Controller
myService.saveSettings($scope.checkUser.username);

Upvotes: 0

Related Questions