Question

我想在控制器中注入Service。该服务将返回$ http.get（）方法。

错误：[$ injector：unpr] http://errors.angularjs.org/1.6.4/ $ injector / unpr？p0 = JsonFilterProvider％20％3C-％20JsonFilter

请在我的代码中说明什么错误？

 <script>
        var app = angular.module("myApp", []);
        app.controller("myCntlr", ['$scope', 'myhttpService', function ($scope,  myhttpService) {

                $scope.myHttpMessage = myhttpService.httpGetService();
            }]);

 app.service("myhttpService", ['$http', '$scope', function ($http, $scope) {

            this.httpGetService = function () {
                console.log("httGetService");
               $http.get('https://reqres.in/api/users').then(function (successResponse) {
                    console.log("http Get");
                    return successResponse;

                }, function (errorResponse) {
                    console.log("http Get Error");
                    return errorResponse
                });
            };


    }]);

</script>


 <div ng-app="myApp" ng-controller="myCntlr">

        <p>Http Message:{{myHttpMessage|Json}}</p>

</div>

Answer 1

实际问题是您没有收到服务的回复。所以json过滤器会抛出错误

 <p>Http Message:{{myHttpMessage | json}}</p>

确保使用return命令从服务返回结果。

return  $http.get('https://reqres.in/api/users').then(function (successResponse)

Answer 2

您无法在服务中注入$scope。这是不允许的。相反，您可以从服务中返回承诺并在控制器内部处理这样的事情。

app.service("myhttpService",['$http', function ($http) {
    this.httpGetService = function () {
       return $http.get('https://reqres.in/api/users');
    }
}]);

app.controller("myCntlr", ['$scope', 'myhttpService', function ($scope,  myhttpService) {
  myhttpService.httpGetService().then(function(response){
     $scope.myHttpMessage = response.data;
  }, function(error){
     //do something on failure
  });
}]);

如何使用AngularJS在Service中调用$ http.get（）

2 个答案: