AnguralUI日历初始化的问题：类型错误：无法读取的未定义的属性“长度” [英] AnguralUI Calendar initialising issue: TypeError: Cannot read property 'length' of undefined

问题描述

我想实现角度的UI日历。我安装了所有用下面的方式亭子，包括脚本所需的依赖关系：

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是以下内容：

HTML is following:

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

JavaScript的code为以下内容：

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

用户界面是对我工作的罚款，按钮日历模式（basicWeek，月，agendaDay）之间切换时也工作得很好。
但是，当我刷新页面，我可以在控制台中看到4个相同的错误：

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

正如你所看到的，我试图表现出两个事件加载页面时，但我不能。此外，在dayClick事件我想延长我的模型，并在日历上添加更多的事件。

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.

文档说，这对一些细胞点击（dayClick事件触发）时的这个的应该指向当前点击TD元素，但对我来说这是指向的窗口的弄好了。

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.

最好的问候

推荐答案

eventsources应该是事件对象数组的数组。更改eventsources为类似于以下..

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

希望这将有助于

这篇关于AnguralUI日历初始化的问题：类型错误：无法读取的未定义的属性“长度”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！