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

Question

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

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

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

这是我的 Controller 中的函数，当在日历中单击日期时调用该函数

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

如您所见，我随后在我的 Controller 中调用另一个方法以从我的数据库中获取在选定日期发生的事件。

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:我正在 Controller 顶部初始化“vm.clickedDate”

vm.dateClicked = new Date();

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

编辑 3:这是完整的 Controller 代码

(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”的 Controller :

(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 中找到该文件。我是否遗漏了什么或是否需要注入(inject)其他东西？

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

Answer 1

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

只需创建新的 Controller 并在其中注入(inject)数据。所以你在 $mdDialog.show 中的 Controller 是这样的

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

或在此处查看示例 https://material.angularjs.org/latest/api/service/ $mdDialog 这和你的任务很相似