Question

我正在努力将网站重写为Angular JS 1.5.7，并且代码无法使用某些数据绑定。

数据在我第一次启动服务器并提供文件时绑定，但是如果我重新加载它不再适用于{{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… }

Answer 1

因为AngularJs＆＃39;脏检查工作，我不相信它会知道您的$.ajax来电已经返回并更改了$scope上的数据。它可能有时工作然后不工作的原因是因为两个同时调用返回的顺序。

如果在$http调用后返回$.ajax调用，Angular将运行其摘要循环并将所有$scope值重新绑定到模板，包括$.ajax中更改的值打电话。相反的情况，其中$.ajax返回秒不会触发此摘要循环，因为jQuery在＆＃39;之外＆＃39;角度世界。

有关将jQuery与Angular结合使用，请参阅this solution。

您基本上想要在$scope.$apply();功能结束时致电success。请参阅AngularJs存储库中有关该主题的AngularJs docs或this FAQ。

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

Answer 2

不要使用jQuery的ajax方法发送请求，而是使用AngularJS的$http对象。

AngularJS不会偶尔检查范围数据。因此，如果您不使用AngularJS的API执行某些异步操作，AngularJS无法找到范围数据何时更改。当然，您可以使用AngularJS的$apply方法强制使用范围数据更新视图，但不建议在此处使用。

为什么我的一些Angular JS数据绑定不起作用？

2 个答案: