Question

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

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

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

我觉得我可能没有正确检索数据并在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>

视图/ 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 /控制器/ DayController

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

JS /服务/ 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;
    });  
}]);

这是我在复制项目时遇到的唯一错误，假设您的实际项目已将角度和角度路径正确地拉入您的项目中（它们在您的index.html中丢失）。

编辑：要在视图中显示事件，您需要以不同方式设置ng-repeat。目前，你有＆＃34; day＆＃34;在错误的变量前面。交换它，它应该按预期工作。（$ 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家庭作业分配

的index.html

视图/ day.html

JS / app.js

JS /控制器/ DayController

JS /服务/ events.js

1 个答案: