Question

不确定我有什么不对，但它没有显示这个日历应用程序中的数据我正在使用角度代码学院创建，任何想法？

我在控制台中收到此错误意外的令牌功能。

day.html

        <h2 class="date">{{ days.date | date }}</h2>
        <div class="event" ng-repeat="event in days.events">
          <a href="#/{{$index}}">
            <h3 class="name">{{event.name}}  </h3>
            <p><span class="from"> {{event.from | date}} </span> - <span class="to"> {{event.to | date}} </span></p>
          </a>
        </div>

DayController.js

    app.controller('DayController', ['$scope', 'events', function($scope, events) {
      events.success(function(data) {
        $scope.days = data;
      });
    }]);

events.js

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

Answer 1

您的代码目前存在的问题是，您还没有退回$http承诺，我的意思是说您已将其退回但是您申请了.success＆amp; error回调该承诺，这限制了您的代码遵循承诺链。

应用工厂代码应该返回$http.get已经返回的承诺。另外我会说工厂应该有方法，以便将来可以轻松扩展它。

<强>工厂

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

<强>控制器

app.controller('DayController', ['$scope', 'events', function($scope, events) {
  events.getData().then(function(response) {
    $scope.days = response.data;
  });
}]);

Answer 2

让工厂只返回$ http.get

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

这将返回一个在您的控制器中解析为您当前正在执行的承诺

events.then(function(res) {
    $scope.days = res.data;
});

要获得更好的解决方案，您可以使用resolve并将已解析的数据注入控制器。结帐示例here

数据未显示 - 意外的令牌功能

2 个答案: