コントローラ内のサービスデータを使用

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

コールバック関数を渡していますが、サービスメソッド内で処理していません。

は今factoryServices.getChart($scope.chartServicesCompleted);は、あなたが別途成功とエラーコールバックを処理することによって、より汎用的にすることができ 動作します

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

として変更を行います。

またはもう1つの方法は、コントローラ内で成功とエラーのロジックを実装することです。

が、関数の型すなわちに

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

編集をチェックすることを忘れないでください：あなたは約束を実装呼び出す高度なあたりとして。

角度バージョン1.6を使用している場合、成功とエラーのメソッドは償却されています。

第二に、あなたがサービス内で行うことができますが、サービスは、コントローラに約束を戻りましょう

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

Answer 3

のようなコントローラでの約束を扱うその後、HTTPオブジェクト

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

を返します。例：

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

コントローラで約束を処理します。ドン.success方法と.ERRORメソッドを使用して「を」の代わりに

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

あなたが成功を処理するためのコントローラに代わりのメソッドを宣言することができますし、エラー

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

使用してください。彼らは他の約束どおりに行動しません。したがって、 'それに慣れてください'

実際にはサービスメソッドのエラーを処理する必要はありません。ほとんどの場合、角度インターセプタを使用します。チェックアウトしてください。しかし、コントローラのエラーを処理する必要があることがあります。コントローラ内のコールバックを取得するのが得意です