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.eventsF结束时将事件源重新分配给$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);
            // Re-assign event sources
            $scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF];
            // Assume that 'events' is an array with 5 elements.
            // console.log($scope.eventSources) will produce :
            // Array [ Array[5], Array[0], app</$scope.eventsF() ]
            callback($scope.mainEvents);
        }
    }, function (error) {
        console.log(error);
    });
};
$scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF];
// console.log($scope.eventSources) will produce :
// Array [ Array[0], Array[0], app</$scope.eventsF() ]

编辑

我已经更新了上面的代码，以显示我在哪个部分测试了$scope.eventSources。你能展示一下你希望$scope.eventSources在样本代码的哪一部分得到更新吗？

Answer 2

我猜这是由Javascript的变量作用域引起的。您引用的$scope.eventSources与控制器中的$scope.eventSources的作用域不同。也许$scope.eventSources在AngularUI日历中的某个地方被复制了。

您可以在控制器中访问$scope.eventSources，只需创建一个包含对该变量的引用的变量。

// Create a variable that holds reference to controller's $scope
var ctrlScope = $scope;
$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) {
        if (events) {
            angular.forEach(events, function (value) {
                this.push(value);
            }, $scope.mainEvents);
            // Test
            console.log(ctrlScope.eventSources);
            callback($scope.mainEvents);
        }
    }, function (error) {
        console.log(error);
    });
};
$scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF];

Answer 3

我找到了这个问题的解决方案。我不太明白为什么我必须这样做，但我设法做到了。我已经从$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);
  });
};