Angular JSのデータバインディングの一部が機能しないのはなぜですか？

サイトをAngular JS 1.5.7に書き直しています。コードが一部のデータバインディングで動作していません。Angular JSのデータバインディングの一部が機能しないのはなぜですか？

データは、私は、サーバーを起動し、ファイルを提供初めてと結合していないが、私はリロードする場合、それはもはや{{currentWeather.temperature}}上で動作します

ここでは、HTMLとJavaScriptのエントリです。私はAPIキーを削除しましたが、私のローカル環境では、console.log（）には期待されるデータが表示され、APIが正しく動作していることが分かります。

HTML：

<!DOCTYPE html> 

<html style="background-color:#111111"> 

<head> 
    <title>Your Local Weather</title> 
    <link type="text/css" rel="stylesheet" href="css/stylesheet.css"> 
    <link type="text/css" rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.css"> 
    <link type="text/css" rel="stylesheet" href="css/weather-icons.css"> 
    <script src="vendors/angular/angular.js"></script> 
    <script src="vendors/jquery/dist/jquery.min.js"></script> 
    <script src="app/app.js"></script> 
</head> 

<body ng-app="localWeather" class="body"> 
    <h1 class="text-primary" id="text-primary-custom" style="text-align: center">Your Local Weather</h1> 


    <div ng-controller="MainController"> 
     <p> {{ userAddress.results[2].formatted_address }} 
     </p> 

     <p>{{currentWeather.temperature}}</p> 


    </div> 




    <footer> 
     <div class="copyright">Copyright 2017, David Taylor Jr.</div> 
     <div class="darksky"> 
      <p>Weather Data provided by <a href="https://darksky.net/dev">Dark Sky</a> <img src="assets/images/darkskylogo.png" alt="Dark Sky Logo" height="28" width="28"></p> 
     </div> 
    </footer> 
</body> 

</html>

はJavaScript：

var app = angular.module('localWeather', []); 


var MainController = function($scope, $http) { 

    var onAddressComplete = function(address) { 
     $scope.userAddress = address.data; 

    }; 

    function success(pos) { 
     var crd = pos.coords; 
     $scope.coords = crd; 

     $http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + crd.latitude + ',' + crd.longitude + '&key=API-KEY') 
      .then(onAddressComplete); 


     $.ajax({ 
      url: 'https://api.darksky.net/forecast/API-KEY/' + crd.latitude + ',' + crd.longitude + "?units=us", 
      dataType: "jsonp", 
      success: function(data) { 
       $scope.currentWeather = data.currently; 
       console.log($scope.currentWeather); 
      } 
     }); 

    } 

    navigator.geolocation.getCurrentPosition(success); 
}; 


app.controller('MainController', MainController);

ここではconsole.logデータです：

Object { time: 1486433921, summary: "Mostly Cloudy", icon: "partly-cloudy-night", nearestStormDistance: 30, nearestStormBearing: 278, precipIntensity: 0, precipProbability: 0, temperature: 56.48, apparentTemperature: 56.48, dewPoint: 41.27, 7 more… }

出典

2017-02-07 davidtaylorjr

console.logデータ（データ） – Sajeetharan

を更新すると、 'console.log（$ scope.currentWeather）;は正常に動作しますか？ – pryxen

@Sajeetharan console.logデータを追加しました。 – davidtaylorjr

ため、どのようにAngularJs'ダーティチェックの作品の、私はしないでください$.ajaxコールが返され、$scopeのデータが変更されたことがわかると思います。時には動作していて、動作しない理由は、2つの同時呼び出しが戻る順序のためです。

$.ajax呼び出し後$http呼び出しが戻った場合、角度はそのダイジェストループを実行し、$.ajaxコールに変更1を含む、テンプレートにすべての$scope値を再バインドします。反対のシナリオでは、$.ajaxが2番目に戻ると、jQueryは角度の世界の外側にあるため、このダイジェストループはトリガーされません。

jQueryとAngularを組み合わせる場合はthis solutionを参照してください。

success機能の最後には、基本的に$scope.$apply();に電話します。 AngularJsリポジトリのトピックについては、AngularJs docsまたはthis FAQを参照してください。

$.ajax({ 
    url: "...", 
    dataType: "jsonp", 
    success: function (data) { 
     $scope.currentWeather = data.currently; 
     console.log($scope.currentWeather); 
     $scope.$apply(); 
    } 
});

出典

2017-02-07 02:30:05 seangwright

これは実際にちょうど慰め： 'キャッチされない例外TypeError： Object.fireWithで： I（2 jquery.min.js）で：scope.apply $は（25 app.js）Object.successでの関数ではありません[as resolveWith]（jquery.min.js：2） at A（jquery.min.js：4） at HTMLScriptElement.c（jquery.min.js：4） at HTMLScriptElement.dispatch（jquery.min.js ：3） HTMLScriptElement.q.handle（jquery.min.js：3） ' – davidtaylorjr

$ scope。$ apply'。@davidtaylorjr – yibuyisheng

ありがとう@yibuyisheng！バッドコピーパスタ。私の答えを更新しました。 – seangwright

要求が、AngularJSの$httpオブジェクトを送信するためにjQueryのajaxメソッドを使用しないでください。

AngularJSはしばらくの間スコープデータをチェックしません。 AngularJSのAPIを使用して非同期操作を行うと、AngularJSはスコープデータがいつ変更されるかを知ることができません。もちろん、AngularJSの$applyメソッドを使用して、スコープデータで強制的にビューを更新することはできますが、ここでは推奨しません。

出典

2017-02-07 02:36:23 yibuyisheng

最初に '$ http'オブジェクトを使用しましたが、CORSの問題は引き続き解決されており、問題の解決方法を理解することはできません。それについての洞察はありますか？ – davidtaylorjr

この別の問題：クロスドメイン。いくつかの解決策があります。状況によっては、サーバーコードの応答にCORSヘッダーを追加することができます。 CORSヘッダーについては、こちらを参照してください。https://developer.mozilla.org/en/docs/Web/HTTP/Access_control_CORS – yibuyisheng

私は実際に数回それを読んで、ちょうどその周りに私の頭を包んでいるように見えることができません。私はまた、それに関する良いチュートリアルを見つけることができないようです。なぜ、$ httpではなく.ajaxメソッドが機能するのですか？ – davidtaylorjr

Angular JSのデータバインディングの一部が機能しないのはなぜですか？

答えて

関連する問題