查看未更新表单提交

这是一个基本的天气应用程序，可以从开放天气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>

来源

2016-08-05 Tim

更改您的服务功能：

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

来源

2016-08-05 15:30:24

查看未更新表单提交

回答

相关问题