0
我是AngularJS的新手，我一直在嘗試修改AngularUI Calendar，但我遇到了一些問題，同時使用Bootstrap Popovers修改了點擊事件。Angular UI日曆彈出內容在Drag/Drop/Resize/ChangeView上消失
我希望默認視圖是agendaWeek，它工作正常，但只要我改變視圖，調整大小或拖放，popover內容就會消失，我不知道爲什麼。
但是，如果我在任何這些操作期間保持打開狀態，它會在更改後顯示彈出窗口的內容，但在關閉時會留下空的彈出窗口。
我並不擔心空的彈出式窗口，因爲我可以隱藏它們，但我希望彈出窗口在我執行任何操作時能夠正確顯示內容。我怎樣才能做到這一點？
/*
* myCalendar.js
*/
angular.module('ui.calendar', ['ui.calendar', 'ngAnimate', 'ui.bootstrap'])
.controller('CalendarCtrl', function($scope, $compile, $timeout, uiCalendarConfig) {
$scope.event = {
id: 0,
title: '',
start: null,
end: null,
attribute1: '',
attribute2: ''
};
$scope.events = [{
id: 1,
title: 'New Event 1',
start: moment('2016-04-14 06:00', 'YYYY-MM-DD HH:mm'),
end: moment('2016-04-14 08:00', 'YYYY-MM-DD HH:mm'),
attribute1: 'Attr 1',
attribute2: 'Attr 2',
state: 'closed'
}, {
id: 2,
title: 'New Event 2',
start: moment('2016-04-14 02:00', 'YYYY-MM-DD HH:mm'),
end: moment('2016-04-14 04:00', 'YYYY-MM-DD HH:mm'),
attribute1: 'First attr',
attribute2: 'Second attr',
state: 'closed'
}];
$scope.hidePopover = {
show: false
};
$scope.onEventRender = function(event, element) {
element.popover({
placement: 'right',
html: true,
trigger: 'manual',
content: $('#popover'),
container: 'body'
});
$scope.events[$scope.getEventIndex(event.id)].popoverElement = element;
};
$scope.onEventClick = function(event, jsEvent, view) {
var index = $scope.getEventIndex(event.id);
if ($scope.events[index].state == 'closed') {
$scope.hidePopover.show = true;
$scope.event = event;
$scope.$apply();
$scope.hideOtherPopups();
$scope.events[index].popoverElement.popover('show');
$scope.events[index].state = 'open';
console.log("Event", event);
} else {
$scope.events[index].popoverElement.popover('hide');
$scope.updatePopover(event);
$scope.events[index].state = 'closed';
}
};
$scope.getEventIndex = function(id) {
var index = -1;
for (var i = 0; i < $scope.events.length; i++) {
if ($scope.events[i].id == id) {
index = i;
}
}
return index;
};
$scope.hideOtherPopups = function() {
for (var i = 0; i < $scope.events.length; i++) {
if ($scope.events[i].state == 'open') {
$scope.events[i].state = 'closed';
$scope.events[i].popoverElement.popover('hide');
$scope.updatePopover($scope.event);
}
}
};
$scope.updatePopover = function(event) {
$('#calendar').fullCalendar('updateEvent', event);
};
$scope.changeView = function(view, calendar) {
$scope.hideOtherPopups();
uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
};
$scope.onEventDragStart = function(event, delta, revertFunc, jsEvent, ui, view) {
$scope.hideOtherPopups();
};
$scope.onEventResizeStart = function() {
$scope.hideOtherPopups();
};
$scope.renderCalender = function(calendar) {
$timeout(function() {
if (uiCalendarConfig.calendars[calendar]) {
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
});
};
$scope.uiConfig = {
calendar: {
height: 1180,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
defaultView: 'agendaWeek',
eventRender: $scope.onEventRender,
eventClick: $scope.onEventClick,
eventDrop: $scope.onEventDrop,
eventResizeStart: $scope.onEventResizeStart,
eventDragStart: $scope.onEventDragStart
}
};
$scope.eventSources = [$scope.events];
});/*
* custom.css
*/
body {
margin-top: 200px;
}
hr {
border-color: lightgray;
}
#leftDiv {
float: left;
border: 1px solid gray;
width: 300px;
height: 1140px;
padding: 20px;
text-align: center;
background-color: #eeeeee;
}
#hiddenDiv {
margin-top: 20px;
height: 300px;
border: 1px solid darkgray;
}
#rightDiv {
float: left;
border: 1px solid darkgray;
}<!--index.html-->
<!DOCTYPE html>
<html lang="en" ng-app="ui.calendar" id="top">
<head>
<title>Calendar</title>
<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/bootstrap-css/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.css" />
<link rel="stylesheet" href="custom.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.1.js"></script>
<script src="https://angular-ui.github.io/ui-calendar/bower_components/moment/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/gcal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.js"></script>-->
<script src="myCalendar.js"></script>
</head>
<body data-spy="scroll">
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
</div>
</div>
</header>
<div role="main" ng-controller="CalendarCtrl">
<div id="leftDiv">
<div id="buttons" class="btn-group">
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">Day</button>
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">Week</button>
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button>
</div>
<div id="hiddenDiv">
<div id="popover" ng-show="hidePopover.show">
<div class="form-group">
<label>New Title</label>
<input type="text" ng-model="event.title" class="form-control" />
<label>New Attribute 1</label>
<input type="text" ng-model="event.attribute1" class="form-control" />
<label>New Attribute 2</label>
<input type="text" ng-model="event.attribute2" class="form-control" />
</div>
</div>
</div>
<hr />
</div>
<div id="rightDiv">
<div class="span12">
<div id="calendar" class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
</div>
</div>
</div>
</body>
</html>