我正在用AngularJS和使用Angular-UI UI-Calendar开发一个项目。在我的代码中,我将ui-calendar的eventSources模型初始化为空数组([]),并将ui-config的"事件参数"设置为自定义函数。该函数发出$http请求,然后调用给events函数的回调函数。
然而,我发现当我加载页面或更改通过左或右按钮查看的月份时,事件函数被调用两次。怎么解呢?
下面是我的代码:function CalendarCtrl($scope, Data){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Stores all events
var events = [];
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
month: "Ay",
week: "Hafta",
day: "Gün",
list: "Ajanda"
},
allDayText: "Tüm gün",
eventLimitText: "daha fazla",
firstDay: 1,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
lazyFetching: true,
// Here listen for calendar change events
events: getEvents
}
};
// For angular ui-calendar element
$scope.eventSources = [];
// Calendar event handlers
function getEvents(from, to, callback){
console.log(from); // For test purposes
// Request for data from server and when it comes, call callback to update calendar
Data.calendar.get(moment(from).unix(), moment(to).unix()).then(function(events){
angular.forEach(events, function(event){
event.start = moment.unix(event.start);
if(event.end){
event.end = moment.unix(event.end);
}
else{
delete event.end;
}
var d = event.start;
if(d.hour() == 0 && d.minute() == 0 && d.second() == 0){
event.allDay = true;
}
if(event.important){
event.className = "important-event";
}
event.editable = true;
});
callback(events);
});
}
我有办法了。
而不是注册一个事件处理程序$scope.uiConfig.calendar。事件,将相同的函数注册到$scope。eventsource数组。像这样:
$scope.eventSources = [getEvents];
当视图发生变化并且日历需要数据时,它将查看$作用域。eventsource元素。如果元素是一个函数,它将被调用,结果将显示在日历中。
我们在一个项目中遇到了类似的问题,我们的解决方案也是在eventSource初始化中将一个空对象放入数组中。
美元范围。eventSources = [{}];