从日历上的点击日期开始在 md-dialog 中显示事件

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

现在我收到错误消息，未定义 showDialog 中使用的 "CalendarController"。我已经将 calendarcontroller 文件添加到我的脚本标签中，因此它应该可以在我的 index.ejs 中找到该文件。我是不是遗漏了什么，还是需要注入其他东西？

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

Answer 1

您不需要在 $mdDialog.show 中再次加载 MainController。在 second-time-running 期间 vm.eventsday 中没有数据。

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

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

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

从日历上的点击日期开始在 md-dialog 中显示事件

Showing events in a md-dialog from the clicked date on a calendar

javascript

dialog

angularjs

mean-stack

angular-material