2017-01-04 3 views
0

Я столкнулся с ошибкой, вызванной угловыми вызовами, вызывающими службу отдыха. Подробности ниже.угловая ошибка бесконечной итерации js

Вот мой app.js код:

angular.module('myApp', []); 

angular.module('myApp').factory('weatherService',function($http){ 
    return { 
     getWeather:function(city,country){ 
      var query = 'city=' + city + '&country=' + country; 
      return $http.get('http://api.openweathermap.org/data/2.5/weather',{ 
       params: { 
        q:query 
       } 
      }).then(function(response){ 
       return response.data.weather[0].description; 
      }); 
     } 
    } 
}); 

angular.module('myApp').controller('WeatherController', 
    function($scope,weatherService){ 
     $scope.getWeather=function(city,country){ 
      $scope.WeatherDescription = "Fetching..."; 
      weatherService.getWeather(city,country).then(function(data){ 
       $scope.weatherDescription = data; 
      }, function(data){ 
       $scope.weatherDescription = "Could not obtain data"; 
      }); 
     } 
}); 

HTML код:

<html ng-app="myApp"> 
    <script src="../js/angular/angular.js" ></script> 
    <script src="../js/app.js" ></script> 
     <body ng-controller="WeatherController"> 
      {{getWeather('chicago','usa')}} 
     </body> 
</html> 

я получаю пустой ответ на странице. Когда я открываю консоль, я получаю эту ошибку:

Watchers fired in the last 5 iterations: [] 
http://errors.angularjs.org/1.3.13/$rootScope/infdig?p0=10&p1=%5B%5D 
    at angular.js:63 
    at Scope.$digest (angular.js:14281) 
    at Scope.$apply (angular.js:14506) 
    at done (angular.js:9659) 
    at completeRequest (angular.js:9849) 
    at XMLHttpRequest.requestLoaded (angular.js:9790) 
(anonymous) @ angular.js:11607 
(anonymous) @ angular.js:8557 
$apply @ angular.js:14508 
done @ angular.js:9659 
completeRequest @ angular.js:9849 
requestLoaded @ angular.js:9790 
angular.js:63 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! 

что может быть неправильным? Кто-нибудь может помочь? Я использую версию 1.6.1, кстати,

Спасибо.

+0

Я думаю, это потому, что вы вызвали функцию getWeather ('chicago', 'usa') 'от интерполяции. Попробуйте вызвать его в контроллере и показать результат в виде (HTML). – SaiUnique

+0

Что вы имеете в виду назвать интерполяцией? –

+0

Звонок с точки зрения не проблема, он будет работать, проблема что-то другое –

ответ

1

Это связано с тем, как работают угловые вычисления $digest и как оцениваются выражения.

У вас есть выражение {{getWeather('chicago','usa')}} в вашем HTML. Всякий раз, когда происходит цикл $digest, это выражение будет оценено, и функция будет вызвана.

Функция устанавливает значение $scope.WeatherDescription = "Fetching...";, а затем вызывает функцию async. Затем изменение в $scope.WeatherDescription вызывает новую итерацию $digest. Новая итерация $digest встречает выражение и отключает функцию (снова). Даже если данные вернутся из обещания, это также, чтобы вызвать свойство на $scope, чтобы изменить, что будет вызывать (другое) $digest, вызывая (другое!) Обращение к функции ... Это по существу произойдет бесконечно, поэтому угловой автоматически вытесняет обработку после 10 циклов.

Это иногда нормально, чтобы вызвать вызов функции в выражении, но для того, чтобы это работало, вызов функции должен возвращать значение, а также должно не вызывать изменения в другой собственности на $scope несвязанной к выражению.

В вашем случае, вместо использования $scope.WeatherDescription, вы хотели бы получить return обещание от вашего обслуживания.

+0

i изменил содержимое тела на {{weatherDescription}} и ошибка была устранена. но я получаю пустой ответ. Не должно ли оно «не получать данные», если в вызванной службе отдыха была ошибка?- –

+0

нет, потому что если вы измените выражение на * выход * функции, вам все равно нужно * вызвать * функцию где-нибудь. Если вы вызвали функцию с вашего контроллера, тогда это могло бы работать ... иначе, '{{weatherDescription}}' всегда будет пустым, так как функция (и запрос '$ http') никогда не произойдет. – Claies

+0

Я вернул описание погоды и сменил html на {{getWeather ('chicago', 'usa')}}, и ошибка digest вернулась –

0

Вы можете проверить, выполняется ли $digest, проверив $scope.$$phase.

weatherService.getWeather(city,country).then(function(data){ 
       if(!$scope.$$phase) { 
       $scope.weatherDescription = data; 
       } 
      }, function(data){ 
       if(!$scope.$$phase) { 
       $scope.weatherDescription = "Could not obtain data"; 
       } 
     });