Fullcalendar日曆最初不使用Angular呈現

我正在爲Fullcalendar製作ui-calendar指令的實現。它應該顯示日曆，因此可以選擇一個日期。但是，雖然日曆的選項卡顯示正常，但日曆本身保持不變，直到單擊其中一個選項卡。Fullcalendar日曆最初不使用Angular呈現

在這一點上，可以選擇一個正確傳回父級的日期。然而，在重新開放日曆時，它再次不受重視，一旦呈現，選擇就不會突出顯示。

在這一點上，這是包含日曆配置的角度指令代碼：

angular.module('app.directives') 
    .directive('calendar', ['_', function(_) { 
     return { 
      restrict: 'A', 
      scope: 
      { 
       date: '=',  // Date in any format Moment accepts 
       select: '&' 
      }, 
      templateUrl: 'partials/directives/calendar.html', 
      controller: ['$scope', '$translate', 'uiCalendarConfig', function($scope, $translate, uiCalendarConfig) 
      { 
       var dayKeys = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za']; 
       var dayNamesShort = []; 
       var dayNamesLong = []; 
       _.each(dayKeys, function (dayKey){ 
        dayNamesShort.push($translate.instant(dayKey + '.short')); 
        dayNamesLong.push($translate.instant(dayKey + '.long')); 
       }); 

       var monthKeys = ['jan', 'feb', 'mar', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec']; 
       var monthNamesShort = []; 
       var monthNamesLong = []; 
       _.each(monthKeys, function (monthKey){ 
        monthNamesShort.push($translate.instant(monthKey + '.short')); 
        monthNamesLong.push($translate.instant(monthKey + '.long')); 
       }); 


       $scope.events = []; 
       $scope.calendarConfig = { 
         header: { 
          left: 'prev title next', 
          center: '', 
          right: 'today' 
         }, 
         defaultDate: $scope.date, 
         selectable: true, 
         editable: true, 
         firstDay: 1, 
         monthNames: monthNamesLong, 
         monthNamesShort: monthNamesShort, 
         dayNames: dayNamesLong, 
         dayNamesShort: dayNamesShort, 
         dayClick: function (date) 
         { 
          $scope.select({date: date}); 
         } 
       }; 
      }] 
     }; 
    }]);

下面是一個包含指令的HTML： - 日曆本身：

<div ui-calendar="calendarConfig" ng-model="events"></div>

的包含日曆的日曆：

<div ng-click="openSidePanel()"> 
<ng-transclude></ng-transclude> 
<div side-panel opened="sidePanelOpen"> 
    <div header-panel back="back()" done="done()" title-key="{{titleKey}}"> 
     <div calendar date="initialDate" select="select(date)"></div> 
    </div> 
</div>

有在這裏詢問有關訪問Fullcalendar對象，也就是這一個了另一個問題：從文檔Accessing fullcalendar object in Angular ui-calendar

我試圖以調用Fullcalendar的「渲染」的方法這樣做，但到目前爲止，這兩個解決方案並從上面的問題只返回undefined。

任何人都可以看到這段代碼有什麼問題，也許可以解釋爲什麼日曆最初不顯示？

有關更多信息，當我嘗試使用ui-calendar文檔中建議的方法時，我將指令名稱從'calendar'更改爲'datePicker'以避免命名衝突。我也在相關的HTML中反映了這種變化。這樣做並沒有改變日曆的行爲，任何對uiCalendarConfig或$ scope.calendar（我的日曆屬性的名稱）的調用都會導致它們未定義。

編輯：This用戶報告類似的問題，可以通過引入超時解決。但是，爲了做到這一點，對uiCalendarConfig的訪問是必需的，至今爲止，這個對象在我當前的設置中仍然未定義。如果有人能給我一個指示如何解決這個問題，我會非常感激。謝謝！

來源

2015-06-11 KatonRyu

進一步的搜索顯示，我們這邊的涼亭設置是錯誤的。它們被設置爲1.0.0，這應該是最後一個版本，但將其設置爲'latest'下載了文件calendar.js的最新版本，該文件解決了uiCalendarConfig未定義的問題。

解決了這個問題後，我使用問題本身提到的超時解決方案來正確渲染日曆。

來源

2015-06-12 09:08:53 KatonRyu

Fullcalendar日曆最初不使用Angular呈現

回答

相關問題