0
まず、Angular JSフレームワークの新機能、Angular Calenderを実装しています。クリックして日付を私はメソッドを呼び出したい。 hrefやng-clickメソッドの呼び出しはどうすればできますか？Angular JSは、Calendarの日付にURLまたはng-clickイベントを追加します。
スクリプトを使用してメソッド呼び出しを行う方法を提案してください。
<!DOCTYPE html>
<html lang="en" ng-app="calendarDemoApp" id="top">
<head>
<title>AngularUI Calendar for AngularJS</title>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="/../bower_components/bootstrap-css/css/bootstrap.css" />
<link rel="stylesheet" href="/../bower_components/fullcalendar/dist/fullcalendar.css">
<link rel="stylesheet" href="calendarDemo.css" />
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="../bower_components/fullcalendar/dist/gcal.js"></script>
<script src="../src/calendar.js"></script>
<script src="calendarDemo.js"></script>
</head>
<body data-spy="scroll">
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="dropdown pull-left">
<a class="brand dropdown-toggle" role="button" data-toggle="dropdown" href="#">
AngularUI
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="https://github.com/angular-ui/"><strong>Related Projects:</strong></a></li>
<li class="divider"></li>
<li><a href="http://angular-ui.github.com/bootstrap/">Bootstrap</a></li>
<li><a href="http://angular-ui.github.com/ng-grid/">Grid</a></li>
<li><a href="https://github.com/angular-ui/AngularJs.tmbundle">AngularJS.tmbundle</a></li>
<li><a href="http://angular-ui.github.io/ui-router/sample/">Router <span
class="label label-success">New!</span></a></li>
<li><a href="http://angular-ui.github.com/Tips-n-Tricks/">Tips-n-Tricks <span
class="label">WIP</span></a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="hero-unit">
<div class="container">
<h1>UI Calendar</h1>
<p>A complete AngularJS directive for the <a href="http://arshaw.com/fullcalendar/">Arshaw FullCalendar</a>.</p>
<p class="btn-group">
<a href="https://github.com/angular-ui/ui-calendar" class='btn'><i class='icon-github'></i> Code on Github</a>
<a href="https://github.com/angular-ui/ui-calendar/archive/master.zip" class='btn btn-primary'><i class="icon-download-alt icon-white"></i> Download <small>(0.8.1)</small></a>
</p>
</div>
<div class="bs-docs-social">
<div class="container">
<ul class="bs-docs-social-buttons">
<li>
<iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ui-calendar&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</li>
<li>
<iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ui-calendar&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</li>
<li>
<div class="g-plusone" data-size="medium"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</li>
</ul>
</div>
</div>
</div>
<div role="main">
<div class="container">
<section id="directives-calendar" ng-controller="CalendarCtrl">
<div class="page-header">
<h1>UI-Calendar</h1>
</div>
<h3>Calender</h3>
<pre class="prettyprint linenums">
<div ui-calendar="{{uiConfig.calendar}}" class="span8 calendar" ng-model="eventSources"></div>
</pre>
</section>
</div>
</div>
Javascriptのコード：
/**
* calendarDemoApp - 0.9.0
*/
angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);
function CalendarCtrl($scope, $compile, uiCalendarConfig) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$scope.changeTo = 'Hungarian';
/* event source that pulls from google.com */
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};
/* event source that contains custom events on the scope */
$scope.events = [{
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
}, {
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}];
/* For Title i want to assign href or ng-click */
/* event source that calls a function on every view switch */
$scope.eventsF = function(start, end, timezone, callback) {
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);
};
$scope.calEventsExt = {
color: '#f00',
textColor: 'yellow',
events: [{
type: 'party',
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
}, {
type: 'party',
title: 'Lunch 2',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
}, {
type: 'party',
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}]
};
/* alert on eventClick */
$scope.alertOnEventClick = function(date, jsEvent, view) {
$scope.alertMessage = (date.title + ' was clicked ');
};
/* alert on Drop */
$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view) {
$scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view) {
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* 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, calendar) {
uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
};
/* Change View */
$scope.renderCalender = function(calendar) {
if (uiCalendarConfig.calendars[calendar]) {
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
};
/* Render Tooltip */
$scope.eventRender = function(event, element, view) {
element.attr({
'tooltip': event.title,
'tooltip-append-to-body': true
});
$compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
};
$scope.changeLang = function() {
if ($scope.changeTo === 'Hungarian') {
$scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
$scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
$scope.changeTo = 'English';
} else {
$scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
$scope.changeTo = 'Hungarian';
}
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
}
コードが長すぎて読み込めません。 [MVCE]（http://stackoverflow.com/help/mcve）にplnkrなどを提供するように気をつけますか？ – CozyAzure
http://angular-ui.github.io/ui-calendar/ – Duke