javascript - 无法在 Angular Material 模态对话框中设置 Controller 的属性

Question

我正在使用带有 ES6 和 webpack 的 Angular 1.5，我的代码如下:

export default class HomeController {
  static $inject = ['$mdDialog', '$sce'];

  constructor($mdDialog, $sce) {
    this.$mdDialog = $mdDialog;
    this.tasks = [
      {
        label: "<strong>Something strong</strong>",
        id: 10
      }
    ];
    this.tasks = this.tasks.map(function(item) {
        item.label = $sce.trustAsHtml(item.label);
        return item;
    });
  }

  showRejectionDialog(ev, $index) {
    this.task = this.tasks[$index];
    this.index = $index;
    console.log(this.task);
    console.log(this.index);
    this.$mdDialog.show({
      controller: HomeController,
      preserveScope: true,
      controllerAs: 'vm',
      template: require('./rejectionDialogModal.jade'),
      parent: angular.element(document.body),
      targetEvent: ev,
    });        
  }
  allow($index) {
    this.tasks[$index].status = 'CONFIRMED';
  }
  reject(index) {
    this.$mdDialog.hide();
    console.log(index);
    console.log(this.task);
    console.log(this.index);
    //this.tasks[this.index].status = 'REJECTED';
  }
  cancel() {
      this.$mdDialog.cancel();
  }
}

和 rejectionDialogModal.jade 看起来像这样:

md-dialog(aria-label='Reject', ng-cloak='')
  form(name="rejectionForm")
    md-dialog-content
      .md-dialog-content
        h2.md-title Reject confirmation for
        div {{vm.task|json}}
        span(ng-bind-html="vm.task.label")
        textarea(placeholder="Please provide a reason for rejection", style="width: 530px; height: 75px")
    md-dialog-actions(layout="row")
      span(flex)
      md-button(ng-click="vm.cancel()") CANCEL
      md-button.md-primary.md-raised(ng-click="vm.reject(vm.index)") REJECT

showRejectionDialog 中的 console.log 显示了正确的值，但 reject 中的值显示未定义，而且 vm.task 在对话框中未定义，标签未显示。当我使用相同的 Controller 时，如何将属性传递给模态对话框？

Answer 1

试试这个来创建一个可以访问 $scope 的 Controller 函数

showRejectionDialog(ev, $index) {
    this.task = this.tasks[$index];
    this.index = $index;
    console.log(this.task);
    console.log(this.index);
    this.$mdDialog.show({
        controller: function () {
             this.parent = $scope;
        },
      preserveScope: true,
      controllerAs: 'vm',
      template: require('./rejectionDialogModal.jade'),
      parent: angular.element(document.body),
      targetEvent: ev,
    });        
  }