HTTP请求AngularJS后,将数据从工厂返回到控制器

时间:2017-08-15 18:30:09

标签: javascript angularjs

我正在写一个工厂,它从php文件中返回一个狗品种列表,但我无法将响应数据返回给我的控制器。我有这个作为工厂

angular.module('myApp')
    .factory('DataService, function($http) {
        return {
            get_breeds: function() {
                method: 'GET',
                url: 'http://localhost:8080/php/api/getbreeds.php'
            }).then(function onSuccess(response) {
                console.log(response); // responds with 200
                return response.data;
            }).catch(function onError(err) {
                console.log(err);
            })
        }
     }
});

这是我的组件的一部分

angular.module('myApp')
    .component('homeComponent', {
    templateUrl: 'home.component.html,
    controller: function (DataService) {

        DataService.get_breeds()
            .then(function(response) {
                var dog_breeds = response;
                console.log(dog_breeds)
            });
    ...

但是我没有得到任何返回和错误信息。有人能引导我朝正确的方向发展吗?

3 个答案:

答案 0 :(得分:1)

我在发布问题后不久就明白了!

最后,我创建了一个刚刚从URL返回数据的工厂:

angular.module('myApp')
    .factory('DataService', function($http) {
        return {
            get_dog_breeds: function(urlString) {
                return $http.get(urlString)
        }
    }
})

然后在我的组件控制器中调用它:

DataService.get_dog_breeds('http://localhost:8080/php/api/getbreeds.php')
                .then(function (response) {
                    console.log(response.data);
                    $scope.dog_breeds = response.data;
                    return $scope.dog_breeds;
                }).catch(function (error) {
                console.log('Error returned: ' + error
                    + ' Please make sure the service you\'re trying to use exists');
                return false;
            });

它刚刚起作用!

到目前为止爱AngularJS btw家伙:)

答案 1 :(得分:0)

只需从服务

返回http请求即可
angular.module('myApp')
    .factory('DataService, function($http) {
       var service = this;      
       service.get_breeds = function() {
           return $http.get('http://localhost:8080/php/api/getbreeds.php')
       }
     }
});

答案 2 :(得分:0)

尝试这样做应该有效

在您的工厂中使用

angular.module('myApp')
.factory('DataService', function($http) {
    return {
        get_breeds: function() {
          var request = $http({
            method: 'GET',                            
            url: 'http://localhost:8080/php/api/getbreeds.php'
        });
        return request;
    }
 }
});

并在控制器中使用它来检索数据

DataService.get_breeds()
    .then(function(response){
       console.log(response.data);
});