使用AngularJS中的服务将对象值返回到控制器

时间:2017-09-23 14:12:46

标签: angularjs

我正在尝试从JSON文件中读取名称。我首先使用唯一的控制器创建没有服务。然后将业务逻辑移动到服务。关于如何将$ scope.mydata从服务返回到控制器,我没有明确的想法。         没有任何输出请帮助。谢谢。

       <!DOCTYPE html>
       <html>
       <head>
         <title></title>
         <!-- Add angularjs -->
         <!-- Add controller script-->
         <script type="text/javascript">
            var app = angular.module('x2js', []);
            app.controller('ctrl',
               ['$scope','myService',function($scope,myService){
                $scope.data = function(){
                    myService.getData()
                }
            }]);
            app.service('myService', ['$http','$log', function($http,$log){
            this.getData = function(){
                $http({
                    url:"student.json",
                    method:"GET",
                    dataType: 'json',
                    contentType: "application/json"

                }).then(function(response){
                    $scope.myData = response.data.records;
                    $log.info($scope.post);
                    return($scope.myData);
                },function(response){
                    $log.error("Error occured");
                });
            }
        }])
       </script>
       </head>
       <body ng-app="x2js">
        <div ng-controller="ctrl">
            <table>
                <tr>
                    <td ng-repeat="x in Data">{{x.Name}}</td>
                </tr>
            </table>
        </div>
     </body>
     </html>

2 个答案:

答案 0 :(得分:2)

使用promise $http服务返回承诺。您需要将then函数移动到控制器中。

<!DOCTYPE html>
       <html>
       <head>
         <title></title>
         <!-- Add angularjs -->
         <!-- Add controller script-->
         <script type="text/javascript">
            var app = angular.module('x2js', []);
            app.controller('ctrl',
               ['$scope','myService', '$log',function($scope,myService, $log){

                   myService.getData().then(function(response){
                    $scope.data = response.data.records;
                    $log.info($scope.data);

                },function(response){
                    $log.error("Error occured");
                })
                }
            }]);
            app.service('myService', ['$http', function($http){
            this.getData = function(){
                retutn $http({
                    url:"student.json",
                    method:"GET",
                    dataType: 'json',
                    contentType: "application/json"

                });
            }
        }])
       </script>
       </head>
       <body ng-app="x2js">
        <div ng-controller="ctrl">
            <table>
                <tr>
                    <td ng-repeat="x in data">{{x.Name}}</td>
                </tr>
            </table>
        </div>
     </body>
     </html>

答案 1 :(得分:0)

在服务中,returnx[data.table::between(x, 3, 7, incbounds = FALSE)] #[1] 4 5 6 方法创建的承诺:

.then

在控制器中,从承诺中提取数据:

app.service('myService', ['$http','$log', function($http,$log){
    this.getData = function(){
        ͟r͟e͟t͟u͟r͟n͟ $http({
            url:"student.json",
            method:"GET",
            //dataType: 'json',
            //contentType: "application/json"
        }).then(function(response){
            var myData = response.data.records;
            //$log.info($scope.post);
            return(myData);
        },function(errorResponse){
            $log.error("Error occured "+errorResponse.status);
            //IMPORTANT
            throw response;
        });
    }
}])

承诺 app.controller('ctrl', ['$scope','myService',function($scope,myService){ var promise = myService.getData(); promise.then(function(data) { $scope.data = data; }).catch(errorResponse) { console.log(errorResponse,status); throw errorResponse; }); }]); 方法返回新承诺,该承诺通过.thensuccessCallback的返回值解析或拒绝(除非该值是一个承诺,在这种情况下,使用promise chaining来解析该承诺中解决的值。 1

在promise错误处理程序中,重新抛出错误响应很重要,否则被拒绝的promise将被转换到一个返回值为errorCallback的已履行承诺。