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

我正在开发一个平均堆栈应用程序，我遇到了一个关于使用来自Angular Material的md对话框的问题

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

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

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

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>

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

编辑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;
      });
    }
} })();

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

现在我得到一个错误，showDialog中使用的“CalendarController”没有定义。我已将calendarcontroller文件添加到脚本标记中，因此它应该在我的index.ejs中找到该文件。我是遗漏了什么还是需要注射其他东西

编辑5:

---

找到了解决办法。一切都与“编辑4”中的一样，只是忘记了show方法中CalendarController周围的引号。

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

只需创建新的控制器并在那里注入数据。 因此，$mdDialog.show中的控制器是这样的

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

---

或者参见这里的示例$mdDialog，它类似于您的任务

，当我遇到同样的问题时，我将函数包装在$timeout中，这很有帮助。在dayClick（）中尝试$timeout（showDialog）。确保您的控制器有$TimeOut但未工作。在获取事件之前仍会调用showDialog。请增加超时延迟或在“eventService.getEventsByDay（date）.then”结尾处调用showDialog（）移动。第二个更好。我将showDialog（）移到了，但问题是在调用showDialog之前没有设置“getEventsByDay”中的“vm.eventsday”。增加超时也不起作用。函数getEventsByDay（日期）{vm.eventsday=eventService.getEventsByDay（日期）。然后（函数（res）{vm.eventsday=res；$timeout（showDialog）；返回vm.eventsday；}）；}对吗？感谢您提供的帮助。我编辑后发布了一些新信息。我已经阅读了angularjs材质api并查看了$mdDialog。现在CalendarController不知何故未定义。应该认识到这一点。找到了解决方案。谢谢你的帮助。

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

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

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