0
我想實現從這裏AngularJS Fullcalendar direcive一個簡單的例子：https://github.com/angular-ui/ui-calendar無法通過AngularJS指令傳遞Fullcalendar選項
它不顯示任何情況下都不應用自定義FullCalendar設置並沒有錯誤顯示， 我究竟做錯了什麼？
我的代碼如下：
<!DOCTYPE html>
<html data-ng-app="foodViewApp">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/index.css">
<!-- fullcalendar -->
<link rel="stylesheet" href="resources/css/fullcalendar.css">
<script src="resources/lib/jquery/jquery.min.js"></script>
<script src="resources/lib/jquery-ui/jquery-ui.js"></script>
<script src="resources/lib/momentjs/moment-with-locales.js"></script>
<script src="resources/lib/fullcalendar/fullcalendar.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.js"></script>
<script src="resources/lib/fullcalendar/calendar.js"></script>
<script src="resources/lib/humanize-duration/humanize-duration.js"></script>
<script src="resources/lib/angular-timer/angular-timer.min.js"></script>
<script src="resources/lib/fullcalendar/gcal.js"></script>
<!-- App libs -->
<script src="resources/js/app/app.js"></script>
<script src="resources/js/app/controllers/controllers.js"></script>
</head>
<body ng-controller="MainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Scheduler</a>
</div>
<ul class="nav navbar-nav navbar-right" ng-hide="isActive('/display')">
<li><a href="#schedule"><i class="fa fa-shield"></i> Schedule</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div data-ng-view=""></div>
</div>
</body>
</html>
與路由應用：
var app = angular.module('foodViewApp',['ngRoute','timer','ui.calendar']);
app.config(function ($routeProvider){
console.log("test");
$routeProvider
.when('/schedule',{
controller: 'ScheduleController',
templateUrl: 'schedule.html'
})
.otherwise({
redirectTo: '/schedule'
});
});
controllers.js：
app.controller('MainController', function($scope, $location, categoryFactory){
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
$scope.title = $location.path();
});
app.controller('ScheduleController', function($scope) {
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'month basicWeek basicDay agendaWeek agendaDay',
center: 'title',
right: 'today prev,next'
},
dayClick: $scope.alertEventOnClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize
}
};
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/* event source that contains custom events on the scope */
$scope.eventSources = [
{title: 'All Day Event',start: new Date(y, m, 1)},
{title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false}
];
});
schedule.html（圖）
<div class="container">
<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
</div>