Question

这是一个基本天气应用程序，可以从开放天气API中获取信息。加载后，它会获取默认城市的天气信息，并且我能够将返回的信息成功记录到控制台，但是在我切换到其他视图然后返回之前，我的视图不会更新。我感觉像是一个$ scope。$ apply需要去某个地方，但我无法让它在我尝试的任何地方工作。

应用：

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);

查看未在表单提交时更新

1 个答案: