Kann nicht Eigentum der Controller in Winkel gesetzt Material modalen Dialog

Question

Ich bin mit Angular 1.5 mit ES6 und webpack, mein Code ist wie folgt:

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

und rejectionDialogModal.jade wie folgt aussehen:

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 

Die console.log im showRejectionDialog zeigt die korrekten Werte, aber die von reject show undefined, auch vm.task ist im Dialog nicht definiert und die Beschriftung wird nicht angezeigt. Wie kann ich Eigenschaften an den modalen Dialog übergeben, wenn ich denselben Controller verwende?

Answer 1

diese ein Versuchen Sie, eine Controller-Funktion zu erstellen, die die $ 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, 
    });   
    }