Question

我正在使用离子框架工作，实际上我有ui-calendar事件的静态日历，所有事件加载都很完美，但加载速度很慢，因为有很多事件，因为它实际上很慢，所以如果需要很少的时间就没有问题在月份更改时加载事件，

我选择的想法是在渲染月份时开始加载事件时添加加载程序（Spinner图标），为了达到这个目的，我得到了不同的想法。我遵循了这个Plunker demo，这完全符合我的需要。

在实施时

loading:function(isLoading, view){ alert("is loading" + isLoading); }

没有输入这个loading:，这将帮助我在“isLoading”为真时显示微调器（加载器），并在“isLoading”为假时隐藏。

这将帮助我在事件加载时获取加载器，但是这段代码被忽略了，我无法得到警告警告，我没有得到我在这里出错的地方。

我的控制器代码是：

 .controller('CalTabCtrl', function($scope ,$timeout,$ionicLoading,$ionicSideMenuDelegate,$ionicModal, $ionicPopup,$sce) 
   {                                                                                       $ionicSideMenuDelegate.canDragContent(true);
        $scope.events = [
  {title: 'All Day Event',start: new Date(y, m, 1)},
  {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
  {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
  {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
  {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
  {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
];
        $scope.calOptions = {
          editable: true,
          lang:'hi',
          height: ($(window).height()) - ($('#calendar').fullCalendar('option', 'height', 1000)),
          header : {
          left: 'prev',
          center: 'title,today',
          right: 'next'
          },
          eventClick: function(calEvent, jsEvent, view){  
            var selectedDate=calEvent.start.format('Do MMMM YYYY,dddd');
            var eventTitle=calEvent.title;
            var description=calEvent.description;
               $scope.safeApply(function()
               {
                 $scope.eventModal(selectedDate,eventTitle,description)
               });
             },
             eventRender: function (event, element) {
                              // $scope.loading();
             element.find('span.fc-title').html(element.find('span.fc-title').text()); 

             },
             loading:function(isLoading, view){
                   alert("is loading " + isLoading);
          },

           };
     /* event sources array*/
        $scope.eventSources = [$scope.events];
          })

在上面的代码中，只有'loading：'没有执行，加载启动和加载完成时没有警报，这将有助于我在那里添加加载器（微调器）。

任何类型的建议都将受到赞赏。

Answer 1

在Plunker演示中，fullCalendar选项如下所示：

eventSources有两个要素。后者带有一个URL会导致Ajax调用，而这个源会使loading()被调用。

很容易确认是这种情况：只需在options.eventSources.length = 1;行上方添加debugger;即可。这使得＃Ajax＆＃39;事件源关闭，loading()不再被调用。

所以，我的猜测是你没有基于Ajax的事件源。

更新：

我制作了我自己的Plunker demo版本，演示了如何将通知器从加载移动到渲染。

calendarController.js：$scope.rendering已添加，$scope.uiConfig.loading已移除，$scope.uiConfig.eventAfterAllRender已添加，$scope.eventSource已从$scope.eventSources中删除。

uiCalendarDirective.js：scope.rendering已添加（一个丑陋的重复），scope.init已修改以调用scope.rendering。

更新2：

Plunker demo的改进版本，用于移动渲染前显示的第一个通知：

viewRender: function () {
    $scope.rendering(true);
},
eventAfterAllRender: function () {
    $scope.rendering(false);
}

同时更新init：

scope.init = function() {
    scope.calendar.fullCalendar(options);
};

当加载事件时，点击月份更改按钮时，angular-ui-calendar“加载”加载器微调器

1 个答案: