AnguralUI日历初始化问题:TypeError:无法读取未定义的属性"长度"

Question

我正在尝试实现angular-ui日历.我用以下方式安装了bower,包含脚本所需的所有依赖项:

<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如下:

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

JavaScript代码如下:

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,month和agendaDay)之间切换时工作正常.但是,当我刷新页面时,我可以在控制台中看到4个相同的错误:

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事件中,我想扩展我的模型并在日历上再添加一个事件.

文档说,当点击某个单元格(dayClick事件触发)时,这应指向当前单击的td元素,但在我的情况下,这是以某种方式指向窗口.

有人可以告诉我,我做错了吗？我没有太多使用Angular的经验,所以,也许,我在这里犯了一些错误.非常感谢你的帮助.

最好的祝福

Answer 1

eventsources应该是事件对象数组的数组.将您的事件源更改为以下内容..

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

希望这会有所帮助