Question

这是我的控制器

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

这是我的观点

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

这是我的服务

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

显示错误，未定义checkUser。

更新：我按如下方式更新了我的服务代码：

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

它仍无效。

Answer 1

您需要让您调用的函数获取您传递的参数：

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

Answer 2

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

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

试试这个

控制器：

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>

服务：

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

Answer 3

这样的事情应该可以解决问题

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

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

Answer 4

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

您的观点：

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

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

4 个答案: