Question

我尝试从json file获取数据。这是JS代码：

var app = angular.module('ForecastApp', []);
console.log('in app');

//fetches weather data from service
  var res ="";
app.factory('forecast', ['$http', function($http) {

$http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
          .success(function(data) { console.log(data); res = data; })
          .error(function(err) { console.log(err); res = err;});
          return res;
}]);

//Save weather data into $scope.fiveDay
app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
      $scope.fiveDay = res;
      console.log('in controller');
    }]);

然后我在主HTML文件中运行：

<body ng-app="ForecastApp">
    <div class="main" ng-controller="MainController">
      ...
            <h1>{{ fiveDay.city_name }}</h1>
...

fiveDay.city_name没有返回任何内容，只是显示空白。 fiveDay的值应为res，这是一个对象，对吗？我不明白为什么fiveDay.city_name不是纽约。

Answer 1

我提供了一个简单的解决方案，只需在控制器中使用$ http服务

var app = angular.module('ForecastApp', []);
console.log('in app');


//Save weather data into $scope.fiveDay
app.controller('MainController', ['$scope', '$http', function($scope, $http) {
      $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
          .success(function(data) { console.log(data); $scope.fiveDay = data; })
          .error(function(err) { console.log(err);});
         
      console.log('in controller');
    }]);

<html>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="ForecastApp">
    <div class="main" ng-controller="MainController">
      ...
            <h1>{{ fiveDay.city_name }}</h1>
            </div>
  </body>

</html>

在此处查看plunker demo

Answer 2

如果您仍想使用自定义服务，这是一种方法。

app.factory('forecastService', ['$http', function($http) {
  return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json');
}]);

app.controller('MainController', ['$scope', 'forecastService', function($scope, forecastService) {
  forecastService.then(function(success) { $scope.fiveDay = success.data});
}]);

此处的服务会返回一个承诺，您可以使用.then方法。这样，控制器就不需要知道关于URL的任何事情。

使用angular时，您不希望脚本中出现任何全局变量。这正是角度服务/工厂的原因。它们提供了一种在多个控制器和其他服务之间共享数据的方法。

这是plunker showing the action。

API，.factory，.controller错误

2 个答案: