AngularJS - ui.calendar TypeError:无法读取属性'长度'未定义的

时间:2015-10-02 14:26:45

标签: javascript jquery angularjs calendar

我正在创建一个带有完整日历的日历,该日历从外部json文件中提取事件。我收到以下错误;

TypeError: Cannot read property 'length' of undefined
at Object.changeWatcher.getTokens (calendar.js:98)
at n.a.$get.n.$digest (angular.js:14300)
at n.a.$get.n.$apply (angular.js:14571)
at angular.js:1455
at Object.e [as invoke] (angular.js:4203)
at d (angular.js:1453)
at uc (angular.js:1473)
at Jd (angular.js:1367)
at HTMLDocument.<anonymous> (angular.js:26304)
at n.Callbacks.j (jquery.js:3099)

在我的angularJS应用程序上。

当我的事件来源看起来像这样;

[ [ { "title": "Public Holiday", "start": "2015-09-07", "allDay": true },
{ "title": "Public Holiday", "start": "2015-09-08", "allDay": true } ] ]

我相信这是真的,但我也可以在其上运行.length函数。但是我不太确定我哪里出错了,非常感谢任何帮助。

controllers.js

var app = angular.module('app',['ui.calendar']);
app.controller('mainController',function($scope,cacheFactory,$interval,holiday){
holiday.allHolidays(function(data){

    var len = data.data.length;
    var friendArray = [];

    for(var i = 0; i < len; i++){

        if(data.data[i].array_phasedescription1stline__tspending_jobandphase == 'Public Holiday'){

            friendArray.push({
                title: data.data[i].array_phasedescription1stline__tspending_jobandphase,
                start: data.data[i].tspending_timedate,
                allDay: true
            });
        }
    }
    $scope.events = [friendArray];
});

$scope.calOptions = {
    editable: true,
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    }
}
});

factories.js

app.factory('holiday',function($http){
return {
   allHolidays: function(callback){
       $http.get('schedule.json').success(callback);
   }

}     });

的index.html

<body ng-app="app">
<div ng-controller="mainController">
    <div class="calendar" ui-calendar="calOptions" ng-model="events"></div>
    {{ events | json}}
</div>
</body>

1 个答案:

答案 0 :(得分:0)

您定义$scope.events的方式为时已晚。控制器启动并且事件源var不是在处理ui-calendar指令时,它将触发错误。可能是错误或功能:)

试试这个:

var app = angular.module('app', ['ui.calendar']);

app.controller('mainController', function($scope, cacheFactory, $interval, holiday) {

  // Event sources array is created here 
  $scope.events = [];

  $scope.calOptions = {
    editable: true,
    header: {
      left: 'prev',
      center: 'title',
      right: 'next'
    }
  }

  holiday.allHolidays(function (data) {
    var len = data.data.length;
    var friendArray = [];

    for(var i = 0; i < len; i++){
      if(data.data[i].array_phasedescription1stline__tspending_jobandphase == 'Public Holiday'){
        friendArray.push({
          title: data.data[i].array_phasedescription1stline__tspending_jobandphase,
          start: data.data[i].tspending_timedate,
          allDay: true
        });
      }
    }

    // We don't create the array here, we modify it, triggering the watch
    $scope.events.push(friendArray);
  });
});