My current setup involves Angular 1.5, ES6, and webpack. Here's a snippet of my code:
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();
}
}
The content of rejectionDialogModal.jade is as follows:
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
While the console.log inside showRejectionDialog displays the correct values, the one from reject shows undefined. Additionally, vm.task is undefined inside the dialog and the label is not displayed. How can I properly pass properties to the modal dialog when using the same controller?