页面annuularjs的刷新部分

Question

我有一个网页，我有两个控制器。一个控制器用于从db获取数据并更新ui-calendar事件，另一个控制器用于向db提交表单数据。我想刷新我的卡（使用第一个控制器时）使用新插入的值，即将值添加到数据库后，应立即使用新的表格数据更新视图，并在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
});

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

要删除事件监听器：

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