Angular UI日曆範圍無法更新

我正在研究一個涉及使用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>

來源

2015-07-19 lemoncode

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

嘗試以下操作：

$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 

});

來源

2015-07-28 21:34:40 Nadi

感謝您的輸入。

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

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

來源

2015-08-04 19:45:51 lemoncode

Angular UI日曆範圍無法更新

回答

相關問題