在 md 对话框中显示日历上单击日期的事件

Question

我正在开发一个MEAN堆栈应用程序，我收到了一个关于使用Angular Material的md-dialog的问题。

在我的网页上，我显示了一个日历，日历上显示了事件。当用户单击该日期时，我希望弹出一个对话框，其中包含一个列表和有关当天发生的事件的一些信息。

我已经成功地实现了点击日期时显示的对话框行为。现在我的问题是对话框中的数据没有更新。

这是我的控制器中的函数，在日历中单击日期时调用该函数

function dayClick(date){
vm.dateClicked = date;
getEventsByDay(date);
showDialog();
}

如您所见，我在控制器中调用另一个方法，从数据库中获取所选日期发生的事件。

function getEventsByDay(date){
vm.eventsday = eventService.getEventsByDay(date).then(function(res){
vm.eventsday = res;
return vm.eventsday;
});
}

已成功从数据库中检索事件。 在我们检索事件后，调用 showDialog。

function showDialog(ev) {
$mdDialog.show({
parent: angular.element(document.body),
controller: MainController,
controllerAs: 'ctrl',
templateUrl: '/templates/dialogevent.html',
hasBackdrop: true,
panelClass: 'dialog-events',
clickOutsideToClose: true,
escapeToClose: true
});
}

因此，当我的代码中使用一些日志记录时，我发现在检索数据之前以某种方式呈现并调用了对话框。我试图链接这些方法以迫使它们彼此执行，但我似乎无法让它工作。

有什么建议吗？

编辑：这是模板 html

<md-dialog aria-label="Event Dialog">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Events on {{ctrl.dateClicked | date:"dd/MM/yyyy"}}</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon aria-label="Close dialog">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; ">
<md-list>
<md-list-item ng-repeat="event in ctrl.eventsday">
<div class="md-list-item-text">
<h4>{{event.name}}</h4>
<h5>{{event.eventType.name}}</h5>
<p>{{event.description}}</p>
</div>
</md-list-item>
</md-list>
</md-dialog-content>

编辑 2：我正在初始化控制器顶部的"vm.clickedDate">

vm.dateClicked = new Date();

新日期将给出今天的日期。当我添加具有今天日期的事件时，事件不会显示在对话框中。

编辑3：这是完整的控制器代码

(function() {
'use strict';
angular.module('ptlab').controller('MainController', MainController);
MainController.$inject = ['$http', '$log', 'auth', '$state', '$stateParams', 'eventService', 'MaterialCalendarData', '$scope', '$mdDialog', '$timeout'];
function MainController($http, $log, auth, $state, $stateParams, eventService, MaterialCalendarData, $scope, $mdDialog, $timeout) {
var vm = this;
vm.users = [];
vm.getUsers = getUsers;
vm.openingsuren = [];
vm.events = [];
vm.setDayContent = setDayContent;
vm.dateClicked = new Date();
$scope.dayClick = dayClick;
$scope.cancel = cancel;
vm.showDialog = showDialog;
vm.eventsday = {};
vm.getEventsByDay = getEventsByDay;
vm.userStudent = true;
vm.userCoworker = true;
vm.userManager = true;
activate();

function activate() {
return load();
}
function load(){
getUsers();
getOpeningsuren();
getEvents();
}
function getUsers() {
return auth.getAll()
.then(function(data) {
vm.users = data.data;
return vm.users;
});
}
function getOpeningsuren(){
return $http.get('/javascripts/content.json').success(function(data){
vm.openingsuren = data.openingsuren.dag;
});
}
function getEvents(){
vm.events = eventService.getAll().then(function(res){
vm.events = res.data;
var evenement;
for(evenement of vm.events){
var content = createContentCalendar(evenement);
setDayContent(evenement.startdate, content);
}
return vm.events;
});
}
function setDayContent(date, content){
MaterialCalendarData.setDayContent(new Date(date), content);
}
function dayClick(date){
vm.dateClicked = date;
getEventsByDay(date);
}
function cancel(){
$mdDialog.cancel();
}
function createContentCalendar(evenement){
var string = "";
string += "<div class='item-box text-center'><h7>" + evenement.name + "</h7></div>";
return string;
}
function showDialog(ev) {
console.log("showDialog");
console.log(vm.eventsday);
$mdDialog.show({
parent: angular.element(document.body),
controller: MainController,
controllerAs: 'ctrl',
templateUrl: '/templates/dialogevent.html',
hasBackdrop: true,
panelClass: 'dialog-events',
targetEvent: ev,
clickOutsideToClose: true,
escapeToClose: true,
allowParentalScroll: true
});
}
function getEventsByDay(date){
vm.eventsday = eventService.getEventsByDay(date).then(function(res){
vm.eventsday = res;
$timeout(showDialog, 1000);
return vm.eventsday;
});
}
} })();

编辑4：尝试通过添加以下内容到showDialog来尝试：

locals: {
eventsday: vm.eventsday,
day: vm.dateClicked
},
controller: CalendarController,
controllerAs: 'ctrl'

我还制作了一个名为"CalendarController"的控制器：

(function() {
'use strict';
angular.module('ptlab').controller('CalendarController', CalendarController);
CalendarController.$inject = ['$mdDialog', 'eventsday', 'day'];
function CalendarController($log, auth, $state, $stateParams, $mdDialog, eventsday, day) {
var vm = this;
vm.eventsday = eventsday;
vm.dateClicked = day;

function cancel(){
$mdDialog.cancel();
}
}})();

现在我收到错误，显示对话框中使用的"日历控制器"未定义。我已将日历控制器文件添加到我的脚本标签中，因此它应该在我的 index.ejs 中找到该文件。我错过了什么还是需要注射其他东西？

编辑5：找到解决方案。一切都像"编辑 4"中一样工作，只是忘记了 show 方法中日历控制器周围的引号。

Answer 1

你不需要在 $mdDialog.show 中再次加载 MainController。在第二次运行时，它没有 vm.eventsday 中的数据。

只需创建新的控制器并在那里注入数据即可。 所以你在 $mdDialog.show 中的控制器是这样的

locals:{parent: vm},
controller: function () { this.parent = vm },
controllerAs: 'ctrl',

或者在此处查看示例 https://material.angularjs.org/latest/api/service/$mdDialog 它与您的任务类似