我在我的一个Web应用程序中使用FullCalendar.js。当页面首次加载带有角度脚本的基本模板时，它会显示在应用程序的登录页面上。我在document.ready函数中启动日历。如果我导航到另一个角度控制器，然后导航回主页而没有重新加载页面，则日历不会显示。
相关HTML
<head>
<title>Ample Admin Template - The Ultimate Multipurpose admin template</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- JS -->
<script src="/static/js/jquery/dist/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.min.js"></script>
<script type='text/javascript' src="/static/js/mobile_angular/mobile-angular-ui.min.js"></script>
<script type='text/javascript' src="/static/js/mobile_angular/mobile-angular-ui.gestures.min.js"></script>
<script src="https://cdn.rawgit.com/Luegg/angularjs-scroll-glue/master/src/scrollglue.js"></script>
<script src='/static/angular-upload/angular-upload.min.js'></script>
<script src='/static/js/ui-bootstrap.js'></script>
<script type='text/javascript' src="/static/js/dealer_bundle.js"></script>
<script>
$(document).ready(function () {
setTimeout(function () {
var calendar = $('#calendar');
calendar.fullCalendar({
dayClick: function (date, jsEvent, view) {
$('#my-event').show(400);
$('.calendar-overlay').show(500);
$('#event-date-title').html('Add Event for ' + date.format());
window.holiday = date.format();
}
});
}, 1000);
});
function closeHolidayWindow() {
$('#my-event').hide(400);
$('.calendar-overlay').hide(500);
}
</script>
<!-- CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/animate.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<link href="/static/css/colors/blue-dark.css" id="theme" rel="stylesheet">
<link href="/static/css/morris.css" rel="stylesheet">
<link href="/static/css/sidebar-nav.min.css" rel="stylesheet">
<link href="/static/css/dealer_base.css" rel="stylesheet">
<link rel="stylesheet" href="/static/css/fullcalendar.css">
</head>
<!-- Calendar Popup -->
<div class="calendar-overlay"
style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 2000; background: black; opacity: .7; display: none;">
</div>
<div class="col-md-6 col-lg-6 col-sm-12 m-b-30" style="min-height: 370px;">
<div id="calendar"></div>
</div>
<div id="my-event" class="modal fade none-border in" style="display: none; z-index: 3000;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-hidden="true"
onclick="closeHolidayWindow()">x
</button>
<h4 class="modal-title">
<strong id="event-date-title">Add Event</strong>
</h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Event Name</label>
<input class="form-control" placeholder="Insert Event Name" name="title"
type="text"
ng-model="holiday.name">
<input type="hidden" id="holiday-date" name="event-date" value=""
ng-model="holiday.date">
</div>
</div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Start Time</label>
<input class="form-control" placeholder="Start Time" name="start-time"
type="time"
ng-model="holiday.start_time">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">End Time</label>
<input class="form-control" placeholder="End Time" name="end-time" type="time"
ng-model="holiday.end_time">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-white waves-effect" onclick="closeHolidayWindow()">Close</button>
<button class="btn btn-success save-event waves-effect waves-light" type="button"
ng-click="saveHoliday()">
Create Event
</button>
</div>
</div>
</div>
</div>
<!-- End Calendar Popup -->
App.js
/* eslint no-alert: 0 */
'use strict';
var app = angular.module('SocialAutoDealerPortalApp', [
'ngRoute',
'ngSanitize',
'mobile-angular-ui',
'mobile-angular-ui.gestures',
'ui.bootstrap',
'SocialAutoDealerPortalApp.controllers'
]);
app.run(function ($http, $transform, $rootScope, $window, $location, $route, SharedState) {
console.log('App Running');
});
var portal_controllers = angular.module('SocialAutoDealerPortalApp.controllers', []);
// this allows our ajax requests to work with django by providing the security token
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/portal_home.html',
reloadOnSearch: false,
controller: 'portalHome'
});
$routeProvider.when('/sign-in', {
templateUrl: 'views/sign-in.html',
reloadOnSearch: false,
controller: 'dealer_signin'
});
$routeProvider.when('/recover-pw', {
templateUrl: 'views/forgot_password.html',
reloadOnSearch: false,
controller: 'passwordRecover'
});
$routeProvider.when('/reset_password/:user/:reset_code', {
templateUrl: 'views/reset_password.html',
reloadOnSearch: false,
controller: 'passwordReset'
});
$routeProvider.when('/info', {
templateUrl: 'views/info-hours.html',
reloadOnSearch: false,
controller: 'infoHours'
});
$routeProvider.when('/inventory', {
templateUrl: 'views/inventory.html',
reloadOnSearch: false,
controller: 'inventory'
});
$routeProvider.when('/vehicle/:vid', {
templateUrl: 'views/vehicle_userlist.html',
reloadOnSearch: false,
controller: 'vehicleSelections'
});
$routeProvider.when('/user/:uid', {
templateUrl: 'views/user_activitylist.html',
reloadOnSearch: false,
controller: 'portalProfile'
});
$routeProvider.when('/employee/:uid', {
templateUrl: 'views/employee_profile.html',
reloadOnSearch: false,
controller: 'portalEmployee'
});
$routeProvider.when('/manage-employees', {
templateUrl: 'views/manage_users.html',
reloadOnSearch: false,
controller: 'manageUsers'
});
$routeProvider.when('/leads/', {
templateUrl: 'views/threads.html',
reloadOnSearch: false,
controller: 'portalThreads'
});
$routeProvider.when('/messages/:mid', {
templateUrl: 'views/message.html',
reloadOnSearch: false,
controller: 'portalChat'
});
});