Question

我试图通过单击按钮或在AngularJS中使用$ interval更新我的视图，我已经设法使请求工作并获取我需要的数据但现在我想让页面更具动态我每次用户按下按钮时都无法更新视图。

我正在使用OpenWeather API获取天气。

要测试视图是否正在更新，我将定义两个ID，从伦敦ID开始，然后将其更改为巴黎ID。

  var WEATHER_URL = 'http://api.openweathermap.org/data/2.5/weather';
  var API_KEY = 'myAPI';
  var LANG = 'en';
  var MODE = 'json'    
  var UNITS = 'metric';

  var ID = 2643743; // London ID

然后，我设置了请求parms：

var requestWeather = {
    method: 'GET',
    url: WEATHER_URL,
    params: {
      id: ID,
      mode: MODE,
      units: UNITS,
      appid: API_KEY,
      lang: LANG
    }
  };

我创建了一个函数来执行请求：

function retrieveWeather() {
    $http(requestWeather)
    .then(function(response) {
      $scope.weather = response.data;
    }).
    catch(function(response) {
      $scope.weather = response.data;
    });
  }
retrieveWeather(); // Request on page load

我有一个更新功能，可以在我更改城市ID时测试视图是否更新：

$scope.update = function() {
    ID = 2988507; // Change to ID of Paris
    retrieveWeather();
    console.log(ID); // <-- This prints the ID in the console, so, the function is called
  };

这是我的观点：

<p>{{weather}}</p>
<button ng-click="update()">Update</button>

当我点击更新按钮时，视图上没有任何变化，它应该再次调用更改城市ID，但没有...

谢谢。

Answer 1

因为你无法改变参数的ID。按值计算。

params: {
      id: ID,
      mode: MODE,
      units: UNITS,
      appid: API_KEY,
      lang: LANG
    }

此ID为2643743.永远不要忘记它。如果你想在更改时更改ID，可以使用$ scope.id来做到这一点。就像 $ scope.ID = 2643743; 如果要更改，$ scope.ID = 2988507。你会做到的。

Answer 2

使用$ http.get（）更新视图。

function retrieveWeather() {
$http.get(requestWeather)
.then(function(response) {
  $scope.weather = response.data;
}).
catch(function(response) {
  $scope.weather = response.data;
});}

Answer 3

确保您的最新更新是否在URL中更新，否则您的代码工作正常。您可以尝试将您的ID直接放在requestWeather变量中。

http"//assets.yourdomain.com

AngularJS $ http请求不更新视图

3 个答案: