Aktualisierung Teil der Seite anngularjs

Question

Ich habe eine Webseite und ich habe zwei Controller.Ein Controller wird verwendet, um Daten von der db und update ui-Kalender-Ereignisse und ein anderer Controller zum Senden von Formulardaten an die db.Ich möchte meine aktualisieren card (Wo der erste Controller verwendet wird) mit dem neu eingefügten Wert, dh sobald der Wert zur db hinzugefügt wird, sollte die Ansicht mit den neuen Tabellendaten aktualisiert und auf dem uicalendar angezeigt werden. Dazu mit angular und js. Das sind meine Controller

app.controller('myNgController', ['$scope', '$http','$rootScope', 'uiCalendarConfig', function ($scope, $http,$rootScope, uiCalendarConfig) { 
 

 
$calendar = $('[ui-calendar]'); 
 

 
var date = new Date(), 
 
    d = date.getDate(), 
 
    m = date.getMonth(), 
 
    y = date.getFullYear(); 
 

 
$scope.changeView = function(view){  
 
    $calendar.fullCalendar('changeView',view); 
 
}; 
 

 
/* config object */ 
 
$scope.uiConfig = { 
 
    calendar: { 
 
    lang: 'da', 
 
    height: 450, 
 
    editable: false, 
 
    selectable: true, 
 

 
    
 
    header: { 
 
     left: 'month basicWeek basicDay', 
 
     center: 'title', 
 
     right: 'today prev,next' 
 
    }, 
 
    eventClick: function(date, jsEvent, view) { 
 
     $scope.alertMessage = (date.title + ' was clicked '); 
 
     alert("clicked"+date.title); 
 
    }, 
 
    select: function(start, end, allDay) 
 
\t { 
 
\t \t 
 
    \t var obj = {}; 
 
    \t obj.startAt = start.toDate(); 
 
    \t 
 
    \t 
 
    \t obj.startAt=new Date(obj.startAt).toUTCString(); 
 
    \t obj.startAt=obj.startAt.split(' ').slice(0, 4).join(' '); 
 
    \t 
 
    \t obj.endAt = end.toDate(); 
 
    \t obj.endAt=new Date(obj.endAt).toUTCString(); 
 
    \t obj.endAt=obj.endAt.split(' ').slice(0, 4).join(' '); 
 
    \t 
 
    \t 
 
    \t 
 
    \t $rootScope.selectionDate = obj; 
 
    \t 
 
    \t 
 
    \t 
 
    \t $("#modal1").openModal(); 
 
\t \t 
 
\t \t 
 
\t \t calendar.fullCalendar('unselect'); 
 
\t }, 
 
    
 
    eventRender: $scope.eventRender 
 
    } 
 
}; 
 

 
$scope.events=[]; 
 
$scope.eventSources = [$scope.events]; 
 
$http.get("rest/leave/list", { 
 
    cache: true, 
 
    params: {} 
 
}).then(function (data) { 
 
    $scope.events.slice(0, $scope.events.length); 
 
    angular.forEach(data.data, function (value) { 
 
    \t console.log(value.title); 
 
     $scope.events.push({ 
 
     \t 
 
      title: value.title, 
 
      description: value.description, 
 
      start: value.startAt, 
 
      end: value.endAt, 
 
      allDay : value.isFull, 
 
      stick: true 
 
     }); 
 
    }); 
 
}); 
 

 
    
 

 
app.controller("MyAddController", function($scope, $http,$rootScope) { 
 
\t $scope.test = {}; 
 
\t 
 
    $scope.add = function() { 
 
    \t $scope.test1=$rootScope.selectionDate; 
 
    \t var jsonData = JSON.stringify($.extend({}, $scope.test, $scope.test1)); 
 
    \t console.log(""+jsonData); 
 
    \t 
 
    \t //console.log("------------>"+JSON.stringify($jsonData)); 
 
    \t $http({ 
 
    \t  url: "rest/leave/create", 
 
    \t  method: "POST", 
 
    \t  data: jsonData, 
 
    \t  headers: {'Content-Type': 'application/json'} 
 
     
 
     }).success(function(data, status, headers, config) { 
 
      if (data) { 
 
       $scope.data = data; 
 
       alert("success"); 
 
      } 
 
     }).error(function(data, status, headers, config) { 
 
      alert("error"); 
 
     }) 
 
    } 
 
});

Answer 1

In diesem speziellen Fall würde ich mit $broadcast vorschlagen. Sobald Ihre DB aktualisiert wurde (in der .success Callback-Funktion), senden Sie ein Ereignis auf $rootScope. Sie können dann dieses Ereignis in Ihrem anderen Controller anhören und tun, was auch immer Sie tun müssen, nachdem das Ereignis empfangen wurde.

In dem MyAddController:

$rootScope.$broadcast('MyAddController.success'); 

in Ihrem MyDbController:

const removeRootScopeListener = $rootScope.$on('MyAddController.success',() => { 
    // Do whatever you need to do here 
}); 

Vergessen Sie nicht, dass Ereignis-Listener auf $rootScope nicht automatisch gereinigt, wenn Ihre lokalen $scope zerstört wird. Um einen Speicherverlust zu vermeiden, entfernen Sie den Ereignislistener manuell. so

$scope.$on('$destroy',() => { 
    removeRootScopeListener(); 
});