2015-07-19 78 views
0

我正在研究一個涉及使用angular-ui日曆的示例項目。我引用的確切代碼是http://angular-ui.github.io/ui-calendar/Angular UI日曆範圍無法更新

如果你看看下面的html代碼,日曆綁定到$ scope.eventSources,這是一個包含3個不同類別事件的數組。截至目前,由於我已經將$ scope.events聲明爲空數組,所以日曆正確顯示了其他兩類事件。

我想要更新$ scope.eventSources,以便在發出http請求時顯示$ 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> 
+0

日曆是指令嗎?如果是這種情況,請確保您使用指令模板本身內的更新邏輯。 – Bwaxxlo

回答

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 

}); 
0

感謝您的輸入。

我知道它是這樣工作的。 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"); 
      }); 

爲了防止在日曆完全呈現之前推送任何約會的場景,我執行了超時作爲安全預防措施。