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元素，但在我的情况下，它指向 window 不知。

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

祝你好运

Answer 1

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

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

希望这会有所帮助

Answer 2

我想知道一些事情，所以我创建了一个Plunk来检查它。

我发现的唯一问题是dayClick传递4个参数(event, date, jsEvent, view)这可能就是为什么你有一个窗口对象，添加事件会在我的测试中传回元素。

长度错误是指GetTokens，它查看日历代码显示它指的是配置数组的长度。确保你的阵列正确关闭并且没有任何错误的分号，你切断了函数的结尾，所以我不能肯定地说。

其他一切似乎都没问题，我必须包括moment.js，但如果你遇到这种情况，你应该得到关于错失时刻的错误，Bower可能会照顾到这一点。

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

使用的文件：

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

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

AnguralUI日历初始化问题：TypeError：无法读取属性＆＃39;长度＆＃39;未定义的

2 个答案: