Question

我正在研究一个涉及使用angular-ui日历的示例项目。我引用的确切代码是http://angular-ui.github.io/ui-calendar/。

如果查看下面的html代码，日历会绑定到$ scope.eventSources，这是一个包含3种不同类别事件的数组。截至目前，由于我已将$ scope.events声明为空数组，因此日历正确显示其他两类事件。

我想更新$ scope.eventSources以在我发出http get请求时显示$ scope.events的新集合。但是，我似乎无法更新$ scope.eventSources。

请原谅我的无知，但如果有人能对这个问题有所了解，我将不胜感激。我错过了什么吗？或者我得到一些错误的概念？在问这个问题之前我研究了很多，但我仍然无法弄明白..提前感谢一堆！：）

$scope.events = [];

$scope.eventSources = [$scope.events, $scope.surgeries, $scope.eventsF];

$http.get('/clinic/api/appointments/')
    .success(function (data) {      
        $scope.events = data;
        //In the web console, $scope.events now contains all the objects from the HTTP Get Request
        console.log($scope.events);

        $scope.eventSources = [$scope.events, $scope.surgeries, $scope.eventsF];
        //In the web console, $scope.eventSources now contains the new $scope.events objects from the HTTP Get Request
        console.log($scope.eventSources);

        //However, in the view, the $scope.eventSources is not updated with the new objects

        //For Testing: Even if I run this line of code below, the $scope.eventSources still show $scope.surgeries and $scope.eventsF only
        $scope.eventSources = [];

        //For Testing: Even forcing a digest loop does not update the $scope.eventSources
        $timeout(function () {      
            $scope.$apply(function () {
                $scope.eventSources = [];
            });
        }, 2000)
    }).error(function (data) {

    });

    //For Testing: However, if I run this line of code below, the $scope.eventSources now do not show $scope.surgeries and $scope.eventsF
    //$scope.eventSources = [];

Html代码

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

Answer 1

尝试以下方法：

$scope.events = [];
$scope.eventSources = [$scope.surgeries, $scope.eventsF]; // don't include $scope.events to $scope.eventSources initially

$http.get('/clinic/api/appointments/')
  .success(function (data) {

    $scope.events = data;
    $scope.eventSources.push($scope.events); // when you successfully get new events - add them to eventSources

});

Answer 2

感谢您的投入。

我让它像这样工作。 listOfAppointments是一个约会对象数组。对于每个约会，我将它逐个推送到$ scope.events。

$http.get('/appointments')

            .success(function (listOfAppointments) {
                $timeout(function () {
                    angular.forEach(listOfAppointments, function (appt) {
                        $scope.events.push(appt);
                    });
                }, 100);
            })

            .error(function () {
                console.log("Some error getting appointments");
            });

我执行了超时作为安全预防措施，以防止我在日历完全呈现之前推送任何约会的情况。

Angular UI-Calendar范围无法更新

2 个答案: