2017-09-23 7 views
-1

JSONファイルから名前を読み取ろうとしています。私はまず唯一のコントローラを使用してサービスを作成しませんでした。しかしビジネスロジックをサービスに移しました。 $ scope.mydataをサービスからコントローラに返す方法については、明確なアイデアは得られていません。 出力が得られません。ありがとうございました。AngularJSのサービスを使用してオブジェクト値をコントローラに返す

 <!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> 

答えて

0

return.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; 
     }); 

    }]); 

.then方法約束は、新しい約束を返します。これは、0の戻り値を介して解決されるか拒否されます。、errorCallback(ただし、その値が約束でない場合は、その約束で解決された値で解決されます。promise chainingを使用してください)。約束のエラーハンドラで1

、それ以外拒否約束がundefinedの値を返す満たさ約束にをを変換されます再スローエラー応答に重要です。

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> 
+0

まだ出力がありません。 : –

+1

@AmitPhartiyalあなたはhtmlと 'data'変数に割り当てられたコントローラの値に' Data'を使用しました。 –

+0

実際には彼の例のmyDataです – pegla

関連する問題