Question

我已将服务和控制器放在同一个js文件中。所以我试图从服务中获取数据并在我的HTML中使用它。在我的代码中，我能够从服务生成数据，但无法将其分配给控制器中的$scope并在html中使用它。那么如何获取数据并将其分配给$scope，以便我可以在我的html中使用它。

var app = angular.module("app",[]);
app.factory('factoryServices',function($http){
    var newObject = {};
    var _getChart= function(){
        $http.get("http://citibikenyc.com/stations/json")
        .success(function(data, status){
            if(data) {
                return data;
            }
        }).error(function(data,status){
           return error;
        });
    }
    newObject.getChart = _getChart;
    return newObject;
});


app.controller("chartController",function($scope,$http,factoryServices){
  factoryServices.getChart($scope.chartServicesCompleted); 
  $scope.chartServicesCompleted = function(data){
        $scope.serviceResponse = data;
    }
})

Answer 1

如果您像这样重写代码，它应该按预期工作：

var app = angular.module("app",[]);
app.factory('factoryServices',function($http){
    var newObject = {};
    var _getChart= function(){
        return $http.get("http://citibikenyc.com/stations/json")
        .then(function(response){
            if(response.data) {
                return response.data;
            }
        }, function(response){
           console.error("getChart failed with ",response);
        });
    }
    newObject.getChart = _getChart;
    return newObject;
});

和您的控制器

app.controller("chartController",function($scope,$http,factoryServices){
    factoryServices.getChart().then(chartServicesCompleted);

    function chartServicesCompleted(data){
        $scope.serviceResponse = data;
    }
})

您的初始代码不起作用的原因是因为您的getChart实际上没有参数。所以传递你的回调：getChart($scope.chartServicesCompleted)没有做任何事情。在重写的代码中，我已经使getChart函数返回由$http.get(..)创建的承诺，然后允许您在控制器中使用.then([callback])。

Answer 2

您正在传递回调函数，但未在服务方法内部进行处理。

改变为

 var _getChart= function(callback){
        $http.get("http://citibikenyc.com/stations/json")
        .success(function(data, status){
            callback(data);
        }).error(function(data,status){
             callback(data);
        });
    }

现在factoryServices.getChart($scope.chartServicesCompleted);将有效您可以通过单独处理成功和错误回调来实现更多通用。

或另一种方法是在控制器中实现成功和错误逻辑。

但不要忘记检查功能类型，即

if(typeof callback == 'function'){
   callback(data);
}

编辑：根据高级版，你可以调用工具承诺。

如果您使用的是角度版本1.6，则成功和错误方法已被折旧。

其次你可以做内部服务返回http对象

var _getChart= function(){
           return $http.get("http://citibikenyc.com/stations/json");            
        }

然后在控制器中处理承诺，如

factoryServices.getChart().then(successMethod, error method);

Answer 3

让服务将承诺返回给控制器。例如：

 var _getChart= function(){
    return $http.get("http://citibikenyc.com/stations/json");
}

并在控制器中处理承诺。使用＆＃39;然后＆＃39;而是

factoryServices.getChart().then(function(response){var theDate = response.data},function(error){});

您可以在控制器中声明方法来处理成功和错误

factoryServices.getChart).then(onSuccess,onError);

Don使用.success方法和.error方法。他们不像其他承诺那样行事。所以习惯了＆＃39;然后＆＃39;

你真的不需要处理服务方法中的错误。我在大多数情况下使用角度拦截器。检查出来。但有时你需要处理控制器中的错误。因此，在控制器中获取回调很有用

使用控制器中的服务数据

3 个答案: