无法在角度材料模态对话框中设置控制器的属性

I'm using Angular 1.5 with ES6 and webpack, my code is as follow:

我正在使用Angular 1.5和ES6以及webpack,我的代码如下:

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

and rejectionDialogModal.jade look like this:

和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

the console.log inside showRejectionDialog show the correct values but the one from reject show undefined, also vm.task is undefined inside dialog and label is not displayed. How can I pass properties to modal dialog when I use the same controller?

showRejectionDialog里面的console.log显示正确的值但是来自reject的那个显示未定义,而且vm.task在对话框中未定义,并且不显示标签。当我使用相同的控制器时,如何将属性传递给模态对话框?

1 个解决方案

#1

Try this one to create a controller function that has access the $scope

尝试这个来创建一个可以访问$ scope的控制器函数

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