刷新页面的一部分

Question

我有一个网页，我有两个控制器。一个控制器用于从数据库获取数据并更新 ui-calendar 事件，另一个控制器用于将表单数据提交到数据库。我想用新的插入值刷新我的卡(使用第一个控制器的地方(，即一旦将值添加到数据库，视图就应该使用新的表数据更新并显示在 ui 日历上。如何使用角度和 js 执行此操作。这些是我的控制器

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)
	{
		
    	var obj = {};
    	obj.startAt = start.toDate();
    	
    	
    	obj.startAt=new Date(obj.startAt).toUTCString();
    	obj.startAt=obj.startAt.split(' ').slice(0, 4).join(' ');
    	
    	obj.endAt = end.toDate();
    	obj.endAt=new Date(obj.endAt).toUTCString();
    	obj.endAt=obj.endAt.split(' ').slice(0, 4).join(' ');
    	
    	
    	
    	$rootScope.selectionDate = obj;
    	
    	
    	
    	$("#modal1").openModal();
		
		
		calendar.fullCalendar('unselect');
	},
   
    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) {
    	console.log(value.title);
        $scope.events.push({
        	
            title: value.title,
            description: value.description,
            start: value.startAt,
            end: value.endAt,
            allDay : value.isFull,
            stick: true
        });
    });
});
 
app.controller("MyAddController", function($scope, $http,$rootScope) {
	$scope.test = {};
	
    $scope.add = function() {
    	$scope.test1=$rootScope.selectionDate;
    	var jsonData = JSON.stringify($.extend({}, $scope.test, $scope.test1));
    	console.log(""+jsonData);
    	
    	//console.log("------------>"+JSON.stringify($jsonData));
    	$http({
    	    url: "rest/leave/create",
    	    method: "POST",
    	    data: jsonData,
    	    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

在这种特殊情况下，我建议使用 $broadcast .数据库更新后(在 .success 回调函数中(，在 $rootScope 上广播事件。然后，您可以在其他控制器中侦听此事件，并在收到事件后执行需要执行的任何操作。

添加到MyAddController ：

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

添加到您的MyDbController ：

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

不要忘记，当本地$scope被销毁时，$rootScope上的事件侦听器不会自动清理。若要防止内存泄漏，请手动删除事件侦听器。

删除事件侦听器：

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