AnguralUI Calendar initialising issue: TypeError: Cannot read property 'length' of undefined

问题

I'm trying to implement angular-ui calendar. I installed all the needed dependencies with bower, included scripts in following way:

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>    
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/fullcalendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/gcal.js"></script>

HTML is following:

<div id="calendar" ui-calendar="calendarOptions.calendar" ng-model="eventSources" ng-controller="MyController"></div>

JavaScript code is following:

myAppModule.controller('MyController', function($scope) {
/* config object */
$scope.eventSources = {
    events: [
        {
            title: 'Event1',
            start: '2014-07-19'
        },
        {
            title: 'Event2',
            start: '2011-07-20'
        }
    ],
    color: 'red',   // an option!
    textColor: 'black' // an option!
};

$scope.calendarOptions = {
    calendar:{
        height: 300,
        editable: true,
        header:{
            left: 'title',
            center: '',
            right: 'prev,next basicWeek month agendaDay'
        },
        dayClick: function(date, jsEvent, view) {
            $('.calendar-input').show();
            console.log(this)
            $('#create-event').click(function() {
                $scope.eventSources.events.push({
                    title: 'Event2',
                    start: '2014-07-20',
                    end: '2014-07-22'
                });

                $('.calendar-input').hide();
            });
        },
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize
    }
};
});

UI is working fine for me, buttons also work fine when switching between calendar modes (basicWeek, month and agendaDay). But, when I refresh the page I can see 4 identical errors in the console:

TypeError: Cannot read property 'length' of undefined
at Object.getTokens     (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular-ui-    calendar/src/calendar.js:86:36)
at Scope.$digest (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:12439:40)
at Scope.$apply (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:12712:24)
at file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:1419:15
at Object.invoke (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:3918:17)
at doBootstrap (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:1417:14)
at bootstrap (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:1431:12)
at angularInit (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:1344:5)
at HTMLDocument.<anonymous> (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:21817:5)
at j (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/jquery/dist/jquery.min.js:2:26860) angular.js:9997
(anonymous function) angular.js:9997
(anonymous function) angular.js:7299
Scope.$digest angular.js:12466
Scope.$apply angular.js:12712
(anonymous function) angular.js:1419
invoke angular.js:3918
doBootstrap angular.js:1417
bootstrap angular.js:1431
angularInit angular.js:1344
(anonymous function) angular.js:21817
j jquery.js:3073
k.fireWith jquery.js:3185
n.extend.ready jquery.js:3391

As you can see, I'm trying to show two events when page is loaded, but I'm not able to. Also, on dayClick event I want to extend my model and add one more event on calendar.

The documentation says, that when clicking on some cell (dayClick events fires) this should point to current clicked td element, but in my case this is pointing to window somehow.

Can someone tell me what I'm doing wrong please? I have no much experience working with Angular so, maybe, I've made some mistake here. Thanks a lot for your help.

Best regards

回答1:

eventsources should be array of array of event objects. Change your eventsources to something like following..

    $scope.events = [
        {
            title: 'Event1',
            start: '2014-07-19'
        },
        {
            title: 'Event2',
            start: '2011-07-20'
        }
    ];
$scope.eventSources = [$scope.events];

Hope this will help

回答2:

I was wondering a few things so I created a Plunk to check this out.

Only problem I found is dayClick passes 4 arguments (event, date, jsEvent, view) this is likely why you got a window object, adding event passes the element back in my testing.

The length error refers to GetTokens, which looking at the calendar code shows it refers to the length of the configuration array. Make sure your array is closed properly and doesn't have any errant semicolons, you cut off the end of the function so I can't say for sure.

Everything else seems okay, I had to include moment.js but you should be getting an error about missing moment if that's the case for you, Bower probably took care of that.

http://plnkr.co/edit/AIHgM2lz5OlmzOVGroQ0?p=info

Documentation used:

http://angular-ui.github.io/ui-calendar/

https://github.com/angular-ui/ui-calendar

来源：https://stackoverflow.com/questions/24910283/anguralui-calendar-initialising-issue-typeerror-cannot-read-property-length

标签

angularjs

angular-ui