AngularJS将参数从Controller传递给Service

时间:2014-08-31 12:28:28

标签: angularjs

我不知道如何将数据从控制器传递给服务作为方法参数...我需要在控制器中设置headers变量,稍后将其添加到服务中,稍后将其添加到http调用

控制器

angular.module('userControllers', []).
    controller('userController', ['$scope', '$q', 'Users', '$location',
        function($scope, $q, Users, $location) {

            $scope.viewUser = function(userId) {
                $location.path('/users/'+userId);
            };

            $scope.createUser = function () {
                $location.path('/users/create');
            };

            headers = {service:'json',resource:'users'};
            $scope.users = Users.query(headers);
            $scope.users.$promise.then(function(result){
                $scope.users = result;
            });

        }]);

服务

angular.module('userServices', ['ngResource']).
    factory('Users', ['$resource', '$q', function($resource, $q){
        var factory = {
            query: function (headerParams) {
                var data = $resource('http://localhost:8080/gateway', {}, {
                    query: {
                        method: 'GET',
                        isArray: true,
                        headers: headerParams
                    }
                });
                var deferred = $q.defer();
                deferred.resolve(data);
                return deferred.promise;
            }
        }
        return factory;
    }]);

在此设置中,我收到错误:[$ injector:unpr]未知提供商:UserProvider< - 用户...不确定如何修复此问题...

稍后编辑:代码清理...发布完整代码和新错误

TypeError: Cannot read property 'then' of undefined
at new <anonymous> (http://localhost/frontend-pdi-angular-js/js/controllers/users.js:16:38)
at invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:3918:17)
at Object.instantiate (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:3929:23)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:7216:28
at link (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js:913:26)
at nodeLinkFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:6648:13)
at compositeLinkFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:6039:13)
at publicLinkFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:5934:30)
at boundTranscludeFn (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:6059:21)
at controllersBoundTransclude (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:6669:18) <div ng-view="" class="ng-scope"> 

稍后编辑#2:一些工作代码,但不使用任何ngResource

angular.module('userControllers', ['userServices']).
    controller('userController',
        ['$scope', '$q', 'Users', '$location', '$http',
            function($scope, $q, Users, $location, $http) {
                headerParams = {service:'json',resource:'users'};
                $scope.users = $http({method: 'GET', url: 'http://localhost:8080/gateway', headers: headerParams, isArray:true}).
                    success(function(data, status, headers, config) {
                        $scope.users = data;
                        console.log(data);
                    }).
                    error(function(data, status, headers, config) {
                        console.log(status);
                    });
            }]);

3 个答案:

答案 0 :(得分:1)

正如其他人所提到的,您在代码中使用了对提供程序($ promise)的不存在引用。通过简单地将延迟设置为$ scope.users,然后对延迟的'then'进行操作,就可以解决这个问题。

您也可以稍微简化一下。您在$ scope对象上设置延迟,然后使用延迟的已解析值覆盖该对象。所以你可以这样做:

Users.query(headers).then(function(result){
       $scope.users = result;
});

如果要将延迟分配给单独的变量:

var deferred = Users.query(headers);
deferred.then(function(result){
       $scope.users = result;
});

答案 1 :(得分:0)

用以下代码替换控制器:

angular.module('userControllers', []). controller('userController', ['$scope', '$q', 'Users', '$location', function($scope, $q, Users, $location) {

        $scope.viewUser = function(userId) {
            $location.path('/users/'+userId);
        };

        $scope.createUser = function () {
            $location.path('/users/create');
        };

        headers = {service:'json',resource:'users'};
        Users.query(headers).$promise.then(function(result){
            $scope.users = result;
        });

    }]);

和工厂使用此代码:

angular.module('userServices', ['ngResource']).
    factory('Users', ['$resource', '$q', function($resource, $q){
        var factory = {
            query: function (headerParams) {

                      return $resource('http://localhost:8080/gateway', {}, {
                    query: {
                        method: 'GET',
                        isArray: true,
                        headers: headerParams
                    }
                })


            }
        }
        return {
         query: factory.query
        }
    }]);

我认为这会对你有帮助。

答案 2 :(得分:0)

angular.module('userControllers', ['userServices']).
controller('userController',
    ['$scope', '$q', 'Users', '$location',
        function($scope, $q, Users, $location) {
            headers = {service:'json',resource:'users'};
            Users.query(headers).then(function(result){
                $scope.users = result;
            });

        }])

angular.module('userServices', ['ngResource']).
factory('Users', ['$resource', '$q', function($resource, $q){
    var factory = {
        query: function (headerParams) {
            var data = $resource('http://localhost:8080/gateway', {}, {
                query: {
                    method: 'GET',
                    isArray: true,
                    headers: headerParams
                }
            });
            var deferred = $q.defer();
            deferred.resolve(data);
            return deferred.promise;
        }
    }
    return factory;
}]);

试试这个。您没有将userServices模块包含到userControllers模块中,您可以省略$scope.users = Users.query(headers);部分,因为如果您这样做,这将调用查询方法。