angular-ui ui-calendar不会在事件源对象/ ng-model的更改上更新

血腥

我正在使用angular-ui/将fullcalendar.js添加到有角度的应用程序中ui-calendar
angularjs 1.3.10fullcalendar 2.2.6ui-calendar 0.9.0-beta.1jQuery 2.1.3moment 2.9.0angular-moment 0.9.0

在日历中,我使用dayClickas作为日期选择器类型的功能来:
-将选定的日期写入范围(用于应用程序中的其他用途)
-events用选定的日期更新事件源对象数组
-显示选定的日期(即新近更新)event

我没有完成第一项和第二项任务的问题,但是第三项没有自动更新。

文档中
An Event Sources objects needs to be created to pass into ng-model. This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.

但是它似乎并没有自动更新日历...

这是错误,ui-calendar还是我缺少什么?

有趣的是,如果我在ng-if选项卡中有日历,并选项卡之间切换,则日历会正确更新(在切换之后)。

请参阅此jsfiddle并:
-运行,然后选择一个日期(注意events阵列已正确更新)
-切换Tab 2然后回到Tab 1-注意日期现在可以正确显示...

html看起来像:

<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>

控制器代码如下所示

myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){

    $scope.calendarDate = [
        {
            events: [
                {
                    title: 'From',
                    start: '2015-01-31',
                    allDay: true,
                    rendering: 'background',
                    backgroundColor: '#f26522',
                },
            ],
        }
    ];

    $scope.setCalDate = function(date, jsEvent, view) {
            var dateFrom = moment(date).format('YYYY-MM-DD');                   // set dateFrom based on user click on calendar
            $scope.calendarDate[0].events[0].start = dateFrom;              // update Calendar event dateFrom
            $scope.dateFrom = $filter('date')(dateFrom, 'yyyy-MM-dd');;         // update $scope.dateFrom
    };

    $scope.uiConfig = {
        calendarFrom : {
            editable : false,
        aspectRatio: 2,
            header : {
                left : 'title',
                center : '',
                right : 'today prev,next'
            },
            dayClick : $scope.setCalDate,
            background: '#f26522',
        },
    };
});

PS看到了这个问题(类似),但是在很多版本之前就被问到了-另外,calendar.fullCalendar('refetchEvents');由于calendar未定义对象,因此建议的解决方案不起作用-不确定calendar.fullCalendar我的代码是什么...

ian

ui-calendar似乎是一个问题。到目前为止,我还无法解决。但是,作为一种解决方法,您可以创建一个新事件,而不是更新当前事件:只需替换$scope.calendarDate[0].events[0].start = dateFrom;$scope.calendarDate[0].events.push({title: 'From', start: selectedDate, allDay: true, rendering: 'background', backgroundColor: '#f26522'});http : //jsfiddle.net/gidoca/kwsrnopz/

附带说明一下,要访问日历对象以调用fullCalendar函数,可以使用$ scope.myCalendar1-ui-calendar将其范围添加到具有HTML日历属性的给定名称的变量。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Angular JS中渲染后angular-ui / ui-calendar更改事件源

Angular不会更新键盘事件的UI

Angular ui.select不绑定到ng-model

Angular UI Bootstrap分页ng模型未更新

angular- ui-select-如何将对象属性绑定到ng-model

值更改时,Angular组件不会更新UI

使用 ui-router-ng2 在 Angular 2 中不使用 ui-sref 更改状态。(Angular2 & UI-Router-ng2)

Angular UI Router:当值更改时,UI父控制器不会更新

Ng-model 值不会与多个 Angular Bootstrap UI 日期时间选择器一起显示

ng-model的Angular UI Bootstrap和Angular Color Picker返回未定义

Ionic 2-模型更改不会在视图/ UI中更新

绑定到ObservableColellection的ItemsControl不会在属性更改时更新UI

ng-enter不会在ui-view上触发,ui-view是页面刷新时另一个ui-view的子级

Angular UI Bootstrap Typeahead ng-model清除字段时说为空

Angular ui-select:如何仅将所选值绑定到ng-model

ng-include更改angular-ui日期选择器的行为

Angular 6 UI 未更新

Angular ui-router子状态不会更新视图

Angular UI Bootstrap选项卡+ ng-include

带有ng-enter-stagger的Angular UI Router

属性更改时,UI不会更新

如何将Angular UI选择结果绑定到ui-grid / ng-grid

jQuery UI可选事件不会在可拖动事件上触发

使用 Chrome 浏览器时,Kendo UI 可排序小部件的更改事件不会在触摸设备中触发

不会在UI中反映出kickout.js observableArray的更改

jQuery UI Datepicker不会在选择日期时更改Value

UI-Router-范围不会在状态更改时被破坏?

jQuery .val()不会在ui-autocomplete选择处理程序上进行任何更改

材质 UI 开关输入不会在表单重置时更新