1

私はAngularが初めてで、サービスを使用してあるコントローラーから別のコントローラーにデータを渡す方法を理解するのに苦労しています。

これまでの Angular では、コントローラーを呼び出して、HTML 内からコントローラーにデータを渡す方法を理解できました。マップ コントローラーをセットアップするには、これは特に優れています。これにより、PHP からの結果のリストを調べ、それらの結果のデータをコントローラーに送信して、マップ上にマーカーを作成します。

私が完全に困惑したのは、ElasticSearch 呼び出しを介してネストされたオブジェクトを生成し、そのデータを Map Controller に渡す 1 つのコントローラーがあることです。

最初に ng-repeat を介して結果をループしようとしましたが、結果を出力することはできましたが、MapController はこれらの結果を HTML で読み取ることができませんでした。 ）。まあ、そうだったと思います。

これは私が試したもので、データを出力しましたが、MapController で読み取ることができませんでした。

<div ng-controller="IndexController">
    <div ng-repeat="r in listingsArea.results">
        <div class="component home-listings"
            data-id="{{r.id}}"
            data-url="{{r.url}}"
            data-lat="{{r.lat}}"
            data-lng="{{r.lon}}"
            data-address="{{r.address}}"
            data-price="{{r.price}}"
        ></div>
    </div>
</div>

あるコントローラーから別のコントローラーにデータを渡す最良の方法は、サービスを介することだと読みました。ここで多くのドキュメントに従ってきましたが、それにもかかわらず、機能していないため、明らかに何かが欠けています。

これは私がこれまでに持っているものです：

ResultsService.js

App.factory("resultsService", function() {

var loadListingsArea = {};

return {
    getLocations: function() {
        return loadListingsArea
    },

    setLocations: function(loc) {
        loadListingsArea = loc;

IndexController.js

App.controller('IndexController', function($scope, resultsService) {

$scope.listingsArea = [];

$scope.loadListingsArea = function() {
    $http.get($window.location + '/listingsarea')
        .success(function(data) {
            $scope.listingsArea = data;
        }
    );
}

$scope.$watch(function() {
    return $scope.loadListingsArea;
}, function() {
    resultsService.setLocations($scope.loadListingsArea);
});
});

MapController.js (この段階でオブジェクトをダンプしようとしているだけで、Google マップの非常に長いコード ベースは含まれていません)

App.controller('MapController', function($scope, resultsService) {

$scope.locations = resultsService.getLocations();

alert($scope.locations);

これは、indexcontroller.js からダンプされたときにオブジェクトがどのように見えるかのサンプルです。

{"count":4,
"results":[
      {"id":"1153292",
       "url":"/this-is-my-slug/1153292",
       "lat":"-37.822034",
       "lon":"144.969553",
       "address":"1302/430 Place Road",
       "price":"$2,350,000",
       "hero":"some-image-here.jpg"}
]};
4

2 に答える 2

1

サービスは$httppromise を返します。それを保管してください。ものをする必要はありません$q.defer。

App.factory("resultsService", function() {

  var self = this;
  self.listingsPromise = undefined;

  return {
      loadLocations: function(url) {
           self.listingPromise = $http.get(url);
           return self.listingPromise;
      },
      getLocations: function() {
        return self.listingPromise;
      }
  );
}

取得を開始するコントローラーは、次のことを実行できます。

resultsService.loadLocations() // returns a promise
  .then(function(response){
    $scope.listingsArea = response.data;
  }) .catch ( function (error) {
    throw error;
  });

そして、それを取得する必要があるコントローラーはこれを行うことができます:

resultsService.getLocations()
  .then(function(response){
    $scope.listingsArea = response.data;
  }) .catch ( function(error) {
    throw error;
  });

両方のコントローラーでエラーをチェックする必要があることに注意してください。

.thenが とは異なるデータを返すことにも注意して.successください。

AngularJS チームは正気に戻り、非推奨になり.successました。.then私たちは皆、これから使用する必要があります。

の非推奨.successと詳細については、最新のAngularJS $http API ドキュメントを参照してください。

于 2015-11-21T05:42:33.100 に答える
0

$http.get をサービスの関数に移動します。$http の promise を返す代わりに $q.deferred を使用するように編集しました。

App.factory("resultsService", function() {

  var self = this;
  self.deferred = $q.defer();
  self.listingsArea = {};

  return {
      loadLocations: function() {
          $http.get($window.location + '/listingsarea')
              .then(function(data){
                 self.listingsArea = data;
                 self.deferred.resolve(self.listingsArea);
              },
              function(e){
                self.deferred.reject(e);
              });
          return self.deferred.promise;
      },
      getLocations: function() {
        return self.deferred.promise;
      }
  );
}

取得を開始するコントローラーは、次のことを実行できます。

resultsService.loadLocations() // returns a promise
  .then(function(data){
    $scope.listingsArea = data;
  });

そして、それを取得する必要があるコントローラーはこれを行うことができます:

resultsService.getLocations()
  .then(function(data){
    $scope.listingsArea = data;
  });

これには追加のマッサージが必要になる場合がありますが、進むべき方向を示してくれるはずです。

また、この方法でオブジェクトを共有すると、どちらのコントローラからでも同じオブジェクトを編集できることに注意してください。これを回避するには、代わりにデータ オブジェクトの angular.copy を渡します。

于 2015-11-21T02:15:45.713 に答える