0

外部 API と通信する Angular アプリがあります。Angular の $resource 呼び出しから初期ビューを生成できます。私の問題は、ng-click で関数を実行するフォームがあることです。次に、その関数は API を再度クエリし、同じスコープ変数を更新することになっていますが、スコープ変数を更新するための 2 番目の $resource 呼び出しの結果を取得できません。

私のコントローラーでは、これはビューに最初に表示されるデータを取得する最初の呼び出しです。

// Initial weather and geolocation data var Weather = $resource('http://example.com/:method'); Weather.get({method: 'current'}).$promise.then(function(weather) { // Success $scope.weather = weather.weather; $scope.geolocation = weather.location; }, function(error) { // Failure $scope.weather = error; });

これまでのところ、ビューが更新され、API が返す JSON と{{ weather.currently.temp }}{{ geolocation }} 変数内のすべてのデータを表示できます。

ただし、送信時に同じ API に別の要求を行い、新しいデータを返す必要があるフォーム (コントローラーと通信するように適切に設定されています) があります。

// Search functionality $scope.weatherLookup = function(query) { $http.get('http://example.com/location/' + query).then(function (value) { $scope.weather = value; }); };

この時点で、ビューの {{ weather }} 変数はどこにも更新されません。まったく。値を取得しようとしたときに取得したconsole.log関数内に関数をスローすると、代わりに同じステートメントで要求すると有効な JSON オブジェクトが取得されます。weatherLookupundefined$scope.weathervalueconsole.log()

その変数を内部にvalue割り当てて、その値を更新してビューにバブルアップさせるにはどうすればよいですか?$scope.weather$scope.weatherLookup

4

1 に答える 1

0

これは私が見つけた解決策です - これを行うための代替/より良い方法を歓迎します。

どうやら$scope.weather複数の値を参照しています。つまり、$resource および $http メソッドは promise を返すため、それらの promise の性質により$scope.weather、ビューとコントローラーに関する限り、実際には 2 つの別個のオブジェクトを参照できます。私が問題を解決した方法は$rootScope、同じweatherオブジェクトが常に上書きされるようにすることでした。

新しいコードは次のとおりです。

'use strict';

angular.module('myApp')
  .controller('WeatherCtrl', function ($scope, Restangular, $rootScope) {

    // Get initial weather data (NOW WITH $rootScope)
    Restangular.one('current').get().then(function(weather) {
      $rootScope.weather = weather.weather;
      $scope.geolocation = weather.location;
    });

    // Search functionality
    $scope.weatherLookup = function(query) {
      Restangular.one('location/' + query).get().then(function(newWeather) {
        $rootScope.weather = newWeather;
        console.log($rootScope.weather);
      });
      console.log($rootScope.weather);
    };

  });

Angular 独自のサービスを使用することから、素晴らしい Restangular ライブラリに$resource切り替え$httpました。この変更にもかかわらず、元の問題は私が使用するまで続きました$rootScope。$resource私はandを使用してこの理論をテストしましたが、まだ機能していたので、Angularでの方法と約束が原因で、ボンネットの下で 2 つの別々のオブジェクトを何らかの形で分割して参照して$httpいたことが問題であることがわかりました。$scope.weather$scope

于 2014-04-28T14:34:07.860 に答える