不会显示 Codecademy 日历的事件 AngularJS 家庭作业

Question

Codecademy's Calendar Assignment

Github

这是我关于 Stack 的第一个问题，所以我不确定展示作业和代码的最佳方式，所以我现在要 link 给他们。

我正在尝试根据上面的分配显示事件，但无法弄清楚我的生活出了什么问题。

我构建了服务并将控制器和视图页面修改到我认为它们应该在视图中显示事件的程度，但我只看到一个未替换的表达式。

我觉得我可能没有正确检索数据并在 view/html 中访问它。

有什么想法吗？

Index.html

<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 class="container">

        <div ng-view></div>

      </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>

views/day.html

<h2 class="date">{{ day.date | date }}</h2>

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

js/app.js

var app = angular.module('CalendarApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider.
    when('/', {
        controller: 'DayController',
        templateUrl: 'views/day.html'
    }).
    otherwise({
        redirectTo: '/'
    });
});

js/controllers/DayController

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

js/services/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

在以下代码块中，您在将事件传递给函数时将其命名为 $events。

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

假设你的实际项目有 angular 和 angular-routes 被正确地拉入你的项目（它们从你的 index.html).

编辑：要在视图中显示事件，您需要以不同方式设置 ng-repeat。目前，您在错误的变量前面有 "day"。交换它，它应该按预期工作。 ($scope.events 未定义，但 $scope.day.events 是您在 ng-repeat 中查找的列表。一旦进入 ng-repeat，就会引用数组 $scope.day.events 的各个元素作为 $scope.event)

<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>

不会显示 Codecademy 日历的事件 AngularJS 家庭作业

Events Won't Display for Codecademy's Calendar AngularJS Homework Assignment

javascript

angularjs

calendar

Index.html

views/day.html

js/app.js

js/controllers/DayController

js/services/events.js