Question

我正在尝试使用AngularJS完成Codecademy项目 - CalendarApp，它使用服务和路由。由于某种原因，它运行不正常。数据未显示，表达式为：{{day.date | date}}只是按原样出现。

有人可以找到我出错的地方吗？我检查了其他人的例子，但无法发现错误。

的index.html：

d.getPlayerTalon()>0

app.js：

    <html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
  </head>
  <body ng-app="CalendarApp">
    <div class="header">
      <div class="container">
        <img src= "img/logo.svg" width="51" height="54">
      </div>
    </div>

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

      <div class="container">


      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/DayController.js"></script>
    <script src="js/controllers/EventController.js"></script>

    <!-- Services -->
    <script src="js/services/events.js"></script>

  </body>
</html>

events.js

var app = angular.module('CalendarApp', ['ngRoute']);
app.config(function ($routeProvider) {
 $routeProvider
 .when("/", {
    controller: 'DayController',
   templateUrl: 'views/day.html'
 })
 .when("/:id", {
        controller: 'EventController',
   templateUrl: 'views/event.html'
 })
 .otherwise({
 redirectTo: "/"
 });
});

DayController.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;
  });
}]);

EventController.js

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

day.html：

   app.controller('EventController', ['$scope', 'events', '$routeParams', function($scope, events, $routeParams) {
  events.success(function(data) {
    $scope.event = data.events[$routeParams.id];
  });
}]);

event.html：

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

Answer 1

Angular应用程序显示{{}}内容意味着它已经破坏了某个地方。我想我知道问题所在。

factory和controller的问题，您从factory返回了承诺，但$http有.success＆amp; .error回调它。但是，当您尝试使用当前代码时，无法从回调中返回data，并且一旦执行.success＆amp; .error承诺你不能继续这个承诺链。相反，我建议你从服务中返回承诺，然后回调将由控制器附加到它。

<强>工厂

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

通过更改代码，您的问题就会得到解决。

任何人都可以在Codecademy的Angular代码中发现错误 - Calendar App？

1 个答案: