任何人都可以在Codecademy - 日历应用程序的Angular code中发现错误吗？

我正在尝试使用AngularJS完成Codecademy项目 - 使用服务和路由的CalendarApp。由于某种原因，它运行不正常。数据未被显示，表达式为：{{day.date |日期}}只是按原样显示。任何人都可以在Codecademy - 日历应用程序的Angular code中发现错误吗？

任何人都可以发现我出错的地方吗？我检查了其他人的例子，但不能发现错误。

的index.html：

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

app.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: "/" 
}); 
});

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

DayController.js

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

个

EventController.js

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

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

event.html：

<div class="event-detail"> 
    <h2 class="event-name">{{ event.name }}</h2> 
    <p class="time"><span class="from">{{ event.from }} </span> - <span class="to">{{ event.to }} </span></p> 
    <p class="where">{{ event.where }} </p> 
</div>

来源

2015-09-05 laurie

检查控制台..应该有一些错误.. –

角申请表示{{}}与内容意味着它已经某处损坏。我想我知道问题在哪里。

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

厂

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

通过改变你的代码，您的问题将得到解决。

来源

2015-09-05 21:50:10

谢谢，这已经解决了问题！但我不完全明白为什么... – laurie

@lauriehocking将更新我的答案详细 –

@lauriehocking看看udpated的答案..谢谢:) –

任何人都可以在Codecademy - 日历应用程序的Angular code中发现错误吗？

回答

相关问题