表單提交時角度ui日歷自動刷新

Question

我正在使用角度ui日歷顯示一系列葉子。此數據是從REST服務提供的。我也可以向數據庫添加一個請假，問題是當我向數據庫添加一個請假詳細信息時不會自動反映在日歷中。如果我刷新頁面，數據將被反映。 基本上，我想做的是提交表單（關閉模式）時要在日歷中顯示的數據。 預先謝謝您。下面是我的代碼我的控制器

 app.factory('calendarSer', ['$http', '$rootScope', 'uiCalendarConfig', function($http, $rootScope, uiCalendarConfig) { return { displayCalendar: function($scope) { $http.get("rest/leave/holidayList", {}).success(function(data, status, headers, config) { $scope.holidayList = data; $calendar = $('[ui-calendar]'); var date = new Date(), d = date.getDate(), m = date.getMonth(), y = date.getFullYear(); $scope.changeView = function(view) { $calendar.fullCalendar('changeView', view); }; var m = null; if ($scope.selectable == "Yes") { m = true; } else { m = false; } /* config object */ $scope.uiConfig = { calendar: { lang: 'da', height: 400, editable: true, selectable: m, header: { left: 'month basicWeek basicDay', center: 'title', right: 'today prev,next' }, eventClick: function(date, jsEvent, view) { $scope.alertMessage = (date.title + ' was clicked '); alert("clicked" + date.title); }, select: function(start, end, allDay) { var obj = {}; obj.startDate = start.toDate(); obj.endDate = moment(end - 1 * 24 * 3600 * 1000).format('YYYY-MM-DD'); $rootScope.selectionDate = obj; $("#modal1").openModal(); // calendar.fullCalendar('unselect'); }, dayRender: function(date, cell) { var today = new Date(); today = moment(today).toDate(); var end = new Date(); end = moment(end).toDate(); end.setDate(today.getDate() + 7); date = moment(date).toDate(); angular.forEach($scope.holidayList, function(value) { if (((moment(value.holiday_date).format("YYYY-MM-DD")) == moment(date).format("YYYY-MM-DD"))) { cell.css("background-color", "#2bbbad"); //$('.date').text('Today'); cell.prepend("<span style=\\"max-width:200px;word-wrap:break-word;margin-top:10px;\\">" + value.description + "</span>"); cell.prepend("<br>") } }); }, eventRender: $scope.eventRender, } }; console.log($scope.holidayList); }).error(function(data, status, headers, config) { alert("error from holidaylist"); }); $scope.events = []; $scope.eventSources = [$scope.events]; $http.get($scope.url, { cache: true, params: {} }).then(function(data) { console.log(data); $scope.events.slice(0, $scope.events.length); angular.forEach(data.data, function(value) { console.log(value.title); if (value.approvalStatus == "Approved") { var k = '#114727'; } else { k = '#b20000' } $scope.events.push({ title: value.signum, description: value.signum, start: value.startDate, end: value.endDate, allDay: value.isHalfDay, stick: true, status: value.approvalStatus, backgroundColor: k }); }); }); } } }]); 

G-包括

 <div id="controllerid"> <div class="row" > <div class="col s10 m10 l10"> <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div> </div> </div> 

 <!-- Modal Structure --> <div id="modal1" class="modal" ng-controller="MyAddController"> <div class="modal-content"> <h4>Apply Leave</h4> <div class="row"> <form class="col s12" id="form1"> <div class="row modal-form-row"> <div class="input-field col s6"> <input id="num" type="text" class="validate" ng-model="test.num"> <label for="num">num</label> </div> <div class="input-field col s6"> <input id="ename" type="text" class="validate" ng-model="test.title"> <label for="ename">Employee Name</label> </div> </div> <div class="row"> <form class="col s12"> <div class="row modal-form-row"> <div class="input-field col s5"> <input id="startDate" type="text" class="validate" value="{{selectionDate.startDate | date}}" readonly > </div> <div class="input-field col s5"> <input id="endDate" type="text" class="validate" value="{{selectionDate.endDate | date}}" readonly> </div> <div class="input-field col s1"> <p> <input type="checkbox" id="test6" ng-model="test.isHalfDay" /> <label for="test6">Half Day</label> </p> </div> </div> <div class="row"> <div class="input-field col s12"> <input id="description" type="text" class="validate" ng-model="test.description"> <label for="description">Description</label> </div> </div> </form> </div> </div> <div class="modal-footer"> <button class="btn waves-effect waves-light" type="submit" ng-click="add()" name="action"> Submit <i class="material-icons right">send</i> </button> </div> </div> 

和我的添加控制器

 app.controller("MyAddController", function($scope, $http,$rootScope,calendarSer) { $scope.test = {}; $scope.add = function() { $("#modal1").closeModal(); $scope.test1=$rootScope.selectionDate; var jsonData = JSON.stringify($.extend({}, $scope.test, $scope.test1)); console.log(""+jsonData); $http({ url: "rest/leave/create", method: "POST", data: jsonData, headers: {'Content-Type': 'application/json'} }).success(function(data, status, headers, config) { if (data) { console.log("Entered in the add controller"); $scope.data = data; $scope.url="rest/leave/list"; $scope.selectable="Yes"; calendarSer.displayCalendar($scope); $("#popupmodal").openModal(); console.log("Exited in the add controller"); } }).error(function(data, status, headers, config) { alert("error from create leave"); }) } }); 

任何幫助，將不勝感激

Answer 1

運行“創建”功能后，在“成功”功能中，您可以通過內置的“ renderEvent”功能，使用相同的數據將事件簡單地添加到fullCalendar中。

這樣的事情（我不知道Angular，所以您可能需要稍作調整以使日歷元素進入上下文，但希望您能理解這個想法）。 我還假設jsonData包含我們可以用於此的所有相關事件數據：

.success(function(data, status, headers, config) {
            if (data) {
                console.log("Entered in the add controller");
                $scope.data = data;
                //add the event to the calendar UI without refreshing the events
                $('[ui-calendar]').fullCalendar("renderEvent", 
                  {
                    start: jsonData.startDate,
                    end: jsonData.endDate,
                    title: jsonData.title
                  },
                  true //make it stick even when the view changes
               );
                $scope.url="rest/leave/list";
                $scope.selectable="Yes";
                calendarSer.displayCalendar($scope);
                $("#popupmodal").openModal();
                console.log("Exited in the add controller");
            }

您可能需要添加更多字段，或者可能需要獲取momentJS來解析startDate / endDate中的值，具體取決於這些字段輸出的內容。

可以在以下完整的日歷文檔中找到“ renderEvent”方法： https ://fullcalendar.io/docs/event_rendering/renderEvent/