如何通过$ http调用获取访问服务器数据的服务？

Question

我$http在一个应该从我的服务器获取数据的服务中进行调用.出于某种原因,我无法让我的服务工作 - 没有任何反应.我知道服务器代码有效,因为如果我将$http调用放在我的控制器中的函数内,那么它会按预期获取服务器数据.这是我到目前为止的代码:

app.service('myService', function($q,$compile,$http) {
    this.getData = function() {
        var deferred = $q.defer();
        var promise = $http.get('myfile.php').success(function (data) {
            var response = $compile(data)($scope);
            deferred.resolve(response);
        });
        return deferred.promise; 
    };
});

此外,我知道使用此服务的代码是有效的,因为如果我执行以下操作,

app.service('myService', function() {
    this.getData = function() {
        return 'TEST';
    };
});

然后我会看到"TEST"这个词出现在利用这项服务的div中.我觉得我非常接近,但有一些我想念的东西.关于我做错了什么的任何想法？

更新:

controller: function($scope, $http, $rootScope, myService){
    var scope = $rootScope;
    scope.viewMyData = function() {
        var element = myService.getData();
        $('#myDiv').html(element);
    }
}

HTML:

<div ng-click="viewMyData()">Click Here</div>
<div id="myDiv"></div>

如果我删除代码myService并简单地返回TEST(如上所述),那么我将看到"TEST"显示在id="myDiv".但由于某种原因,$http呼叫没有被触发.

Answer 1

@tymeJV是对的,但这是我试图更好地拼写出来的例子. $http返回一个promise接口,允许您在$http响应返回时链接回调.所以,在这种情况下,调用myService.getData()不能立即返回结果(它是从服务器获取数据),所以你需要给它一个函数来在服务器最终响应时执行.所以,使用promises,你只需使用thePromise.then(myCallbackFunc).附加你的回调.

服务

app.service('myService', function($q,$compile,$http) {
    this.getData = function() {
        var promise = $http.get('myfile.php');
        promise = promise.then(function (response) {
            return response.data;
        });
        return promise;
    };
});

调节器

controller: function($scope, $rootScope, myService){
    var scope = $rootScope;
    scope.viewMyData = function() {
        myService.getData().then(function(data) {
            $('#myDiv').html(element);
        });
    }
}