Просмотр не обновляется после отправки формы

Question

Это основное приложение для погоды, которое захватывает информацию из API открытой погоды. При загрузке он получает информацию о погоде для города по умолчанию, и я могу успешно зарегистрировать возвращаемую информацию на консоли, однако мое представление не обновляется, пока я не переключусь на другое представление, а затем обратно. Я чувствую себя как $ scope. $ Apply нужно куда-то идти, но я не мог заставить его работать везде, где я пытался.

App:

var weather = angular.module('weather', ['ngRoute', 'ngResource', 'ui.router']); 

weather.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/overview'); 
    $stateProvider 
     .state('overview', { 
      url: '/overview', 
      templateUrl: 'pages/overview.html', 
      controller: 'overviewController' 
     }) 
     .state('forecast', { 
      url: '/forecast', 
      templateUrl: 'pages/forecast.html' 
     }) 
     .state('details', { 
      url: '/details', 
      templateUrl: 'pages/details.html' 
     }) 
}); 

weather.controller('homeController', ['$scope', '$location', '$resource', 'weatherService', function($scope, $location, $resource, weatherService) { 
    $scope.txtCity = weatherService.city; 
    $scope.submit = function() { 
     weatherService.city = $scope.txtCity; 
     weatherService.getForecast(weatherService.city, function(x){ 
      weatherService.currentForecast = x; 
      // TESTING 
      console.log(x); 
     }); 
    }; 

    // Run the submit function initially to retrieve weather data for the default city 
    $scope.submit(); 

    // Function to determine the active tab, sets its class as "active" 
    $scope.isActive = function (path) { 
     return ($location.path().substr(0, path.length) === path) ? 'active' : ''; 
    } 
}]); 

weather.controller('overviewController', ['$scope', '$filter', 'weatherService', function($scope, $filter, weatherService) { 
    $scope.currentForecast = weatherService.currentForecast; 

    // Kelvin to Fahrenheit 
    $scope.convertTemp = function(temp) { 
     return Math.round((1.8*(temp - 273))+32); 
    } 
    $scope.convertToDate = function(dt) { 
     var date = new Date(dt * 1000); 
     return ($filter('date')(date, 'EEEE, MMM d, y')); 
    }; 
}]); 

weather.service('weatherService', function($resource, $http){ 
    this.currentForecast = null; 

    // default city 
    this.city = 'Chicago, IL'; 
    this.getForecast = function(location, successcb) { 
     $http({ 
      method : "GET", 
      url : "http://api.openweathermap.org/data/2.5/forecast/daily?q="+location+"&mode=json&cnt=7&appid=e92f550a676a12835520519a5a2aef4b" 
     }).success(function(data){ 
      successcb(data); 
     }).error(function(){ 

     }); 
    } 
}); 

overview.html (вид):

<h4>Daily</h4> 
<ul> 
    <li ng-repeat="w in currentForecast.list">{{ convertToDate(w.dt) }} {{ convertTemp(w.temp.day) }}&deg;</li> 
</ul> 

Отправить форму:

<form ng-submit="submit()"> 
    <button type="submit" class="btn btn-primary btn-sm">Get Forecast</button> 
    <input type="text" ng-model="txtCity">     
</form> 

Answer 1

Изменение функции службы для:

this.getForecast = = function(location) { 
    return $http({ 
     method : "GET", 
     url : "http://api.openweathermap.org/data/2.5/forecast/daily?q="+location+"&mode=json&cnt=7&appid=e92f550a676a12835520519a5a2aef4b" 
    }).then(
     function(response) { 
      return response.data; 
     } 
    ) 
}; 

И в контроллере, использовать его, как это в функции submit:

weatherService.getForecast(weatherService.city).then(
    function(data) { 
     weatherService.currentForecast = data; 
     console.log(data); 
    } 
); 

Это позволяет обрабатывать функцию успеха в $http обещание непосредственно от контроллера. В настоящее время вы передаете функцию службе, и она не знает, что такое параметр weatherService, потому что он находится за пределами области обслуживания (он доступен в контроллере).

Теперь в вашем overviewController контроллера, вы можете наблюдать за изменениями внутри службы, как это:

$scope.$watch(function() { return weatherService.currentForecast; }, 
    function(newVal) { 
     if(!newVal) return; 
     $scope.currentForecast = newVal; 
}, true);