Angular UI日曆（FullCalendar）不與範圍事件綁定

使用Angular & FullCalendar（通過angular-ui-calendar項目），我似乎無法使事件綁定正常工作。Angular UI日曆（FullCalendar）不與範圍事件綁定

當硬編碼的事件：

$scope.events = [ 
     { 
      title: 'Event1', 
      start: '2016-03-04' 
     } 
    ]; 
    $scope.eventSources = { 
     events: $scope.events, 
     color: '#999', 
     textColor: 'black' 
    };

，一切工作正常。

但是，由於該頁面包含事件過濾器，因此我需要能夠隨時對其進行修改。這樣做時，日曆上沒有任何修改。

我已經嘗試了許多不同的方法，並閱讀了angular-ui-calendar & fullCalendar文檔，但找不到任何線索，說明爲什麼綁定無法正常工作。

當我這樣做（超時被用來只是爲了簡化問題，考慮一個Ajax請求，而不是）：

$scope.events = []; 
    $scope.eventSources = { 
     events: $scope.events, 
     color: '#999', 
     textColor: 'black' 
    }; 
    $timeout(function() { 
     $scope.events = [ 
     { 
      title: 'Event1', 
      start: '2016-03-04' 
     } 
     ]; 
    },1000);

沒有被添加到日曆。我試圖調用fullCalendar元件上的刷新方法，使用

uiCalendarConfig.calendars.myCalendar.fullCalendar('rerenderEvents'); 
//also tried - uiCalendarConfig.calendars.myCalendar.fullCalendar('refetchEvents'); 
//also tried - uiCalendarConfig.calendars.myCalendar.fullCalendar('render');

（uiCalendarConfig被正確地注入到控制器）。

我也嘗試用$scope.$apply()包裝代碼，但沒有成功。

我fullCalendar工作之前通過的JavaScript/jQuery的API直接和它工作得很好，角度的UI日曆文件指出，「的UI日曆指令與NG-模型很好地發揮。」但到目前爲止，它的不過是痛苦。

我實際的HTML標籤是

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>

有任何在控制檯沒有誤差修改。

關於如何解決這個問題以及爲什麼事件綁定不是一個可以假設的簡單方法？

來源

2016-03-06 Yani

事件在日曆小部件的初始化期間受到約束。這就是爲什麼你唯一的機會，如果你想要它在飛行中更新，你將不得不初始化小部件，當你有你需要的所有信息生成事件等等你可以做的例如是把你的部件內的

<div ng-if="widgetConfigLoaded">...</div>

而設置widgetConfigLoaded爲真您設置的配置

，你也可以嘗試一下，但大概不會，因爲我剛纔說了變薄的工作後是不是

$timeout(function() { 
     $scope.events = [ 
     { 
      title: 'Event1', 
      start: '2016-03-04' 
     } 
     ]; 
    },1000);

你可以嘗試

$timeout(function() { 
     $scope.events.push(
     { 
      title: 'Event1', 
      start: '2016-03-04' 
     } 
    ); 
    },1000);

，因爲你做的是一個新的陣列覆蓋$ scope.events。這個新數組與您之前鏈接到您的配置的$ scope.events無關。配置裏面仍然有一個空的數組。

使它更清楚一點思考下面的代碼：

var a = []; 
var b = a; 
a = [1,2,3];

你會期望b可能是？它當然是一個空陣列。

來源

2016-03-06 21:13:34

謝謝，但這似乎是一個很大的警告，你是說沒有'角'的方式來修改初始化後顯示的事件嗎？ – Yani

看看我編輯過的帖子。如果第二部分不會幫助你，那麼就是這樣。那麼angular-ui-calendar不會在「稍後」支持綁定事件。這經常發生。這只是指令的一個問題，因爲它不是「以那種方式實現」，那麼 –

我已經嘗試將數據推送到'$ scope.events'，不幸的是無法正常工作。 – Yani

-1

你比較接近。

$scope.events = [ 
    { 
     title: 'Event1', 
     start: '2016-03-04' 
    } 
];

在您的日曆配置中設置此事件。

events: $scope.events,

來源

2016-03-07 05:10:50

與我已經完成的工作有什麼不同？ – Yani

沒有任何區別，只是分配事件的不同方式。 –

謝謝，但它不會解決日曆中未顯示發佈更改的問題。每當事件發生實時更改時，我都發現了一個使用'removeEvents'和'addEventSource'的工作。 – Yani

我不得不重新加載整個事件渲染，以便將新/更新/刪除的事件應用到日曆。

function formulateSources() { 
     console.log('formulating sources',events); 
     $scope.eventSources = [events]; 
     if(uiCalendarConfig.calendars.myCalendar) { 
      uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents'); 
      uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', events); 
     } 
    }

來源

2016-12-21 04:51:22 tsuz

Angular UI日曆（FullCalendar）不與範圍事件綁定

回答

相關問題