数据在路线中没有约束力?

时间:2015-09-30 17:21:31

标签: javascript angularjs angular-routing

我陷入了这个Codecademy AngularJs项目的最后一部分

我使用了路由并且路由工作(它在单击时更改视图),但不显示数据绑定。我检查了 index.html ,所以我认为那里没有错误。你能检查一下吗?这是代码:

app.js

var app = angular.module('CalendarApp', ['ngRoute'])
app.config(['$routeProvider', 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;
  });
}]);

EventController.js

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

event.html (查看)

<div class="event-detail">
  <h2 class="event-name">{{event[eventId].name}}</h2>
</div>

这是 events.json 的简短格式,我试图获取其数据:

{
  "date": 1421384400000,
  "events": [
    {
      "name": "Casual Friday",
      "from": 1421384400000,
      "to": 1421470800000,
      "where": ""
    },
    {
      "name": "Taco Time",
      "from": 1421431200000,
      "to": 1421438400000,
      "where": "Brooklyn Taco Co. 120 Essex Street New York, NY 10002"
    }
  ]
}

1 个答案:

答案 0 :(得分:0)

<强> events.js 尝试返回承诺,但只加载一次;

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

现在,如果你使用console.log,你应该在你的控制器中接收Promise对象。

<强> EventController.js

app.controller('EventController', ['$scope', 'events','$routeParams', function($scope, events, $routeParams) {

    // code in regards to itemId etc.

    events.getEvents().then(function(d){
        $scope.event = d.data.events; 
    });

}]);

(考虑到其他功能如您所述) 让我知道它是否有效