【问题标题】:Angular ui-calendar events function called twiceAngular ui-calendar 事件函数调用了两次
【发布时间】:2015-10-06 14:30:29
【问题描述】:

我正在使用 AngularJS 并使用 Angular-UI UI-Calendar 开发一个项目。在我的代码中,我将 ui-calendar 的 eventSources 模型初始化为空数组 ([]),并将 ui-config“事件参数”设置为自定义函数。该函数发出 $http 请求,然后调用事件函数的回调函数。

但是,我发现当我加载页面或更改通过左右按钮查看的月份时,事件函数会调用两次。我该如何解决?

这是我的代码:

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

【问题讨论】:

    标签: javascript jquery angularjs fullcalendar angular-ui


    【解决方案1】:

    我有办法。

    不要将事件处理程序注册到 $scope.uiConfig.calendar.events,而是将相同的函数注册到 $scope.eventSources 数组。像这样:

    $scope.eventSources = [getEvents];
    

    每当视图更改并且日历需要数据时,它都会查看 $scope.eventSources 元素。如果一个元素是一个函数,它将被调用并且结果将显示在日历中。

    【讨论】:

      【解决方案2】:

      我们在一个项目中遇到了类似的问题,我们的解决方案也是在 eventSource 初始化中将一个空对象放入数组中。

      $scope.eventSources = [{}];

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2016-05-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多