赢得的活动't Codecademy's日历AngularJS作业

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

本文关键字：日历 AngularJS 作业 Codecademy 活动      更新时间：2024-06-21

Codecademy的日历分配

Github

这是我在Stack上的第一个问题，所以我不确定展示赋值和代码的最佳方式，所以我现在要链接到它们。

我正试图根据上面的任务来显示事件，但无法弄清楚我的生活出了什么问题。

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

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

有什么想法吗？

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

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

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

这是我在复制项目时发现的唯一错误，假设你的实际项目有角度和角度路线被正确地拉到你的项目中（它们在你的index.html中丢失了）

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

<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>
相关文章：