Question

我有一个网页，我有两个控制器。一个控制器用于从数据库获取数据并更新ui-calendar事件和另一个控制器将表单数据提交到数据库。我想刷新我的卡（第一个使用了控制器与新的插入值，即一旦将值添加到数据库中，视图应使用新的表数据更新并显示在ui-calendar上。如何使用angular和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
});

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

删除事件监听器：

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

刷新页面anngularjs的一部分

1 个答案: