AngularUI日历事件源,在每个视图开关上调用一个函数

Question

为了证明这个问题,我将解释我想要实现的目标.我正在使用AngularUI日历创建一个预订系统,问题是当事件数量增加时(100多个事件,日历将需要几分钟来绑定数据),日历的性能开始迅速下降.由于我每次用户更改视图(周,月,日,上一页,下一行等等)时都通过发送AJAX请求来尝试从后端获取数据,这是我开始时有问题.

正如在AngularUI日历网站上建议我可以使用此功能:$scope.eventsF = function (start, end, timezone, callback) {...}并将其添加到$scope.eventSources它,它将在每个视图开关上调用.我添加了$scope.eventsF我的$scope.eventSources但它永远不会更新.

这是示例(获取所有数据,并且它正在工作):

$scope.mainEvents = []; //To initiate the event source
Event.getEvents().then(function (events) { // Event is a factory
  if (events) { //Checking if I have events
    // If I try: $scope.mainEvents = events; the $scope.eventSources won't update
    angular.forEach(events, function(value) {
      this.push(value);
    }, $scope.mainEvents);
  } else {
    // Tell the user no events to render...
  }
}, function (error) {
  console.log(error);
});

$scope.eventSources = [$scope.mainEvents, $scope.draftEvents];

现在我改为Event.getEvents()将两个参数作为视图的开始日期和结束日期,将它们发送到后端,并再次以json的形式检索数据(工作正常,我安慰了它).

这是代码(我尝试了两种方式):事件正在渲染,但两种方式都$scope.eventSources没有更新.

第一:

$scope.mainEvents = function (start, end, timezone, callback) {
  var s = start.format('YYYY-MM-DD'),
      e = end.format('YYYY-MM-DD');
  Event.getEvents(s, e).then(function (events) {
    $scope.mainEvents = []; //even tried $scope.eventSources.mainEvents
    if (events) {
      angular.forEach(events, function (value) {
        this.push(value);
      }, $scope.mainEvents); //event tried $scope.eventSources.mainEvents
      callback($scope.mainEvents);
    }
  }, function (error) {
    console.log(error);
  });
};

$scope.eventSources = [$scope.mainEvents, $scope.draftEvents];

第二:

$scope.eventsF = function (start, end, timezone, callback) {
  var s = start.format('YYYY-MM-DD'),
      e = end.format('YYYY-MM-DD');
  Event.getEvents(s, e).then(function (events) {
    $scope.mainEvents = [];
    if (events) {
      angular.forEach(events, function (value) {
        this.push(value);
      }, $scope.mainEvents);
      callback($scope.mainEvents);
    }
  }, function (error) {
    console.log(error);
  });
};

$scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF];

我希望这很清楚.

Answer 1

我找到了解决问题的方法。我不太明白为什么我必须这样做，但我设法让它发挥作用。$scope.mainEvents我已经从数组中一一删除了事件（我认为在 AngularUI 日历中，它们$watch用于每个事件），然后将 Promise 中的新事件$scope.mainEvents一一添加到其中。不要使用该callback()函数，因为它将$scope被更新（$watch将负责渲染），因此它将callback()再次渲染事件，这样您最终将每个事件渲染两次。这是最终的代码：

$scope.mainEvents = [];
$scope.eventsF = function (start, end, timezone, callback) {
  //moment.js objects
  var s = start.format('YYYY-MM-DD'),
      e = end.format('YYYY-MM-DD');
  Event.getEvents(s, e).then(function (events) {
    //emptying the array
    $scope.mainEvents.splice(0, $scope.mainEvents.length);

    //add the retrieved events
    angular.forEach(events, function (value) {
        this.push(value);
      }, $scope.mainEvents);
  }, function (error) {
    //promise error logic
    console.log(error);
  });
};