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）不与范围事件绑定

回答

相关问题