我在 angularJs 日历上遇到问题。基本上我使用的是Angular-UI日历所以我在这个控制器中创建了一个名为“CalendarController”的控制器我正在调用服务并使用ajax调用获取数据......但我不知道它为什么会发生，当页面加载它时直接进入日历配置行，然后进行服务 ajax 调用。所以任何人都可以为此提供一些解决方案。
目标：需要优先控制器调用，例如，如果我有 2 个控制器 Ctrl1 和 Ctrl2，那么如果我想调用 Ctrl2，然后再调用 Ctrl1。
'use strict';
/* Controllers */
angular.module('myApp', ['myApp.services','myApp.directives','myApp.filters','ui.bootstrap', '$strap.directives']).
controller('navCtrl', function($scope) {
console.log("### navController");
}).
controller('ContactController', function($scope, contactFactory) {
console.log("### ContactController is called");
/**
* Getting Contact detail
**/
$scope.contacts = [];
contactFactory.getContacts().success(function(response){
$scope.contacts = response.data;
console.log("### Getting Contact data");
console.log($scope.contacts);
});
}).
controller('ActivityController', function($scope, activityFactory) {
$scope.oneAtATime = true;
$scope.loading = true;
activityFactory.getNotifications().success(function(response){
var activityData = [];
var total = parseInt(response.data.length);
for (var i=0; i<total; i++)
activityData.push(response.data[i].desc);
$scope.activities = activityData;
console.log("### Getting Activity data");
console.log($scope.activities);
$scope.loading = false;
});
}).
controller('CalendarController', function($scope, contactFactory, calendarFactory) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/* event source that pulls from google.com */
$scope.eventSource = {
editable: true,
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};
/* event source that contains custom events on the scope */
/**
* Getting Staff detail
**/
$scope.staff = [];
var staffDetail = {};
contactFactory.getStaff().success(function(response){
var staffData = response.data;
if(staffData!=null) {
var total = parseInt(staffData.length);
for (var i=0; i<total; i++) {
staffDetail = {
'id': staffData[i].staffId,
'name': staffData[i].name,
};
$scope.staff.push(staffDetail);
}
}
console.log("### Getting Staff data");
console.log($scope.staff);
});
var calDailyEvents = {};
$scope.events = [];
calendarFactory.getCalendarDailyEvents().success(function(response){
var eventData = response.data;
console.log("### getCalendarDailyEvents");
if(eventData!=null) {
var total = parseInt(eventData.length);
for (var i=0; i<total; i++) {
var totalStaff = eventData[i].eventAssignedToForms.length;
var staffIds = [];
for(var j=0;j<totalStaff;j++) {
staffIds.push(eventData[i].eventAssignedToForms[j].contactId);
}
console.log(staffIds);
calDailyEvents = {
'id': eventData[i].id,
'title': eventData[i].eventName,
'start': Date(eventData[i].startDate),
allDay: false,
resource: staffIds
};
$scope.events.push(calDailyEvents);
}
}
console.log("### Getting DailyEvents data");
console.log($scope.events);
});
/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, callback) {
/*Commented for testing purpose*/
/* var s = new Date(start).getTime() / 1000;
var e = new Date(end).getTime() / 1000;
var m = new Date(start).getMonth();
var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
callback(events); */
};
/* alert on eventClick */
$scope.alertEventOnClick = function( calEvent, jsEvent, view ){
$scope.$apply(function(){
$scope.alertMessage = ('Event: ' + calEvent.title);
$scope.alertMessage += ('View: ' + view.name);
});
};
$scope.onEventRender = function(event, element) {
console.log("### onEventRender");
};
$scope.onDayClick = function( date, allDay, jsEvent, view ){
$scope.$apply(function(){
$scope.alertMessage = ('Day Clicked ' + date);
});
//$scope.$popover();
};
/* alert on Drop */
$scope.alertOnDrop = function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view){
$scope.$apply(function(){
$scope.alertMessage = ('Event Droped to make dayDelta ' + dayDelta);
});
};
/* alert on Resize */
$scope.alertOnResize = function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ){
$scope.$apply(function(){
$scope.alertMessage = ('Event Resized to make dayDelta ' + minuteDelta);
});
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function(sources,source) {
var canAdd = 0;
angular.forEach(sources,function(value, key){
if(sources[key] === source){
sources.splice(key,1);
canAdd = 1;
}
});
if(canAdd === 0){
sources.push(source);
}
};
/* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
className: ['openSesame']
});
};
/* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
};
/* Change View */
$scope.changeView = function(view) {
$scope.myCalendar.fullCalendar('changeView',view);
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'prev,next',
center: 'title',
right: 'resourceDay, agendaWeek, resourceWeek',
},
resources: $scope.contacts,
allDaySlot: false,
defaultView: 'resourceDay',
dayClick: $scope.onDayClick,
eventClick: $scope.alertEventOnClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.onEventRender
}
};
console.log($scope.contacts);
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
});