查看未更新表單提交

這是一個基本的天氣應用程序，可以從開放天氣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

查看未更新表單提交

回答

相關問題