Как отобразить данные в формате HTML с http get call, используя angularJS 1.6

Я могу утешить результат вызова http, но когда я его связываю, чтобы просмотреть страницу html, я не могу этого сделать. Может кто-то помочь мне с этим? Я публикую код контроллера и HTML ниже.

Код контроллера

           //module
        var weatherApp = angular.module('weatherApp',['ngRoute' , 'ngResource']);


        //Routes
        //http://api.openweathermap.org/data/2.5/forecast/daily?APPID=metric

        weatherApp.config(function ($routeProvider) {

            $routeProvider
            .when('/', {
              templateUrl:'pages/home.htm',
              controller:'homeController'
            })
            .when('/forecast', {
              templateUrl:'pages/forecast.htm',
              controller:'forecastController'
            });
        });

        //services
        weatherApp.service('cityService' ,function() {
          this.city ="San Jose, CA";
        });


        //controllers
        weatherApp.controller('homeController' ,['$scope', 'cityService', function($scope , cityService) {

          $scope.city = cityService.city;
          $scope.$watch('city' , function () {
            cityService.city = $scope.city;
          });
        }]);

          $scope.city = cityService.city;
  console.log($scope.city);
  $http({
      url: "http://api.openweathermap.org/data/2.5/forecast/daily?APPID==metric",
      method: "GET",
      params: {q: $scope.city, cnt:2}
   }).then(function(response){
        $scope.weatherResults = response.data; 
        console.log($scope.weatherResults);
   });

}]);

HTML-код для Index.htm

  <!DOCTYPE html>
<html lang="en" ng-app="weatherApp">
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet"  href="css/navbar.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script>
   <script src="app.js"></script>
</head>
<body>
  <!-- NAVBAR -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
      <a class="navbar-brand" href="#">Accurate Weather</a>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- NAVBAR ENDS-->

<div class="container">
  <div ng-view></div>
</div>

</body>
</html>

Код для Forecast.html

Forecast for {{city}}   <!-- THIS WORKS -->

{{ weatherResult.cnt }}  <!-- THIS DOES NOT WORK -->

Код для home.htm (ВСЕ РАБОТАЕТ КАК МОЖНО ЗДЕСЬ, ТОЛЬКО РАЗМЕЩАЯСЯ С ЗАЯВКОЙ О ЦЕЛЯХ)

<div class = "row">
  <div class = "col-md-6 col-md-offset-3">
    <h4>Forecast by city</h4>
    <div class="form-group">
      <input type="text" ng-model="city" class="form-control" />
    </div>
      <a href="/weatherApp/index.htm#!/forecast" class="btn btn-primary">Get forecast </a>
  </div>
</div>

Консольный вывод правильно отображает объекты:

Источник

4 ответа

Просто поместите это назначение внутрь $scope.apply уведомить угловой двигатель, что данные были изменены асинхронно, поэтому они должны быть обработаны правильно

$scope.$apply(function () {
    $scope.weatherResult = response.data; //IF I LOG THIS IT WORKS
});

Также полезно добавить проверку того, что цикл Gigest не выполняется сейчас

if(!$scope.$$phase) {
  //$digest or $apply
}
Источник

Правильный код выложен. Я назначил http get call для $scope.variable, я просто удалил его, и он начал работать. Спасибо

Источник

Встроенная двухсторонняя привязка данных Angular не работает с http-ответами, что является известной проблемой. использование $timeout вручную запустить двустороннюю привязку данных и, таким образом, запустить цикл дайджеста.

$scope.getWeather= function(){
    $http({
        url: "http://api.openweathermap.org/data/2.5/forecast/daily?AP&units=metric",
        method: "GET",
        params: {q: $scope.city, cnt:2}
 })
    .then(function(response){
           $timeout(function(){
             $scope.weatherResult = response.data; 
          }, 0);

    });
 }
}]);

Обратите внимание $timeout таймер установлен на 0 мс, чтобы немедленно запустить цикл дайджеста.

Источник

Может быть, попытаться инициализировать $scope.weatherResult как пустой объект в вашем контроллере, чтобы AngularJS мог его правильно смотреть.

Источник
Другие вопросы по тегам