AngularJS：如何将模型数据传递给服务？

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.

它显示错误，未定义checkUser。

Update: I updated my service code as follows:

更新：我更新了我的服务代码，如下所示：

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

It is still not working.

它仍然无法正常工作。

4 个解决方案

#1

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

#2

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.

AngularJS很棒，如果你在你的html中声明一个$ scope变量而不是在你的控制器中，它会为你实例化它作为一个空字符串。

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

但是你有$ scope.checkUser作为一个Object（没有实例化），我认为这就是你的问题所在。

Try this

尝试这个

Controller:

控制器：

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

    $scope.checkUser = {};

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

}]);

Html:

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

#3

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

#4

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

最初创建控制器时未定义$ scope.checkUser，因为它绑定到输入框，用户还没有机会输入。在这种情况下，在用户键入文本框之前，Angular不会为您创建$ scope.checkUser对象（也不会创建用户名属性）。如果您要向控制器添加一个单击处理程序，那应该可以解决问题：

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>

#1