刷新頁面的一部分anngularjs

我有一個網頁，我有兩個controller.One控制器用於從數據庫獲取數據和更新ui-calendar事件和另一個控制器提交表單數據到db.I想刷新我的卡（使用第一個控制器的地方）與新的插入值，即一旦該值被添加到數據庫視圖應該更新與新的表數據，並顯示在ui-calendar.How做到這一點角和JS。這些都是我的控制器刷新頁面的一部分anngularjs

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"); 
 
     }) 
 
    } 
 
});

來源

2017-05-15 Vikhyath Maiya

在這種特殊情況下，我建議使用$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(); 
});

來源

2017-05-15 14:03:31

真正的混亂很抱歉，編輯我的問題與更新controller.I我不理解其功能是$ rootScope內部調用$在（「MyAddController.success」這樣。我的觀點得到更新。請幫助。謝謝 –

調用一個從數據庫獲取數據並將數據保存在'$ scope'中的函數。我不確定哪一個是'MyDbController'的一部分，我不能在你的代碼中找到它 –

對不起，我很快就添加了控制器。這是我的實際控制器。此控制器用於顯示和更新ui-calendar的事件。但我並不是說ding這個控制器的函數調用$ rootScope。$ on（'MyAddController.success'.....有什麼線索？ –

刷新頁面的一部分anngularjs

回答

相關問題