Utilizing Angular Material, I have functionality in TasksCtrl that triggers a $mdDialog - utilizing the locals property to pass an object that will be changed in DialogCtrl before being returned to the view.
Nevertheless, the .then() callbacks do not trigger on ng-click. Although if I manually set a scope variable that is displayed elsewhere in the dialog, I can see the ng-click altering the value, but the only way to execute the .then() is by clicking outside of the modal.
TasksController (as TasksCtrl)
(function() {
angular.module('ICP_App')
.controller('TasksController', function(ToggleService, TasksService, $mdToast, $mdDialog) {
var vm = this;
vm.createTaskAttachment = function(ev) {
$mdDialog.show({
controller: 'DialogController',
controllerAs: 'DialogCtrl',
templateUrl: '../partials/dialogs/create-task-attachment.tmpl.html',
locals: {
data: vm.selectedTask
},
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
.then(function(answer) {
alert('you submitted');
}, function() {
alert('you cancelled it');
});
};
})
})();
DialogController (as DialogCtrl)
(function() {
angular.module('ICP_App')
.controller('DialogController', function(data) {
var vm = this;
vm.selectedTask = data;
vm.tempAttachments = [];
vm.addTempAttachment = function(keypress, type) {
if (keypress.which === 13) {
if (type == 'link') {
vm.tempLinkAttachment.category = 'link';
vm.tempAttachments.push(vm.tempLinkAttachment);
vm.tempLinkAttachment = {};
}
}
};
})
})();
And the template file for the $mdDialog
<md-dialog aria-label="Create Attachment" flex-gt-sm="50">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Add New Attachment</h2>
<span flex></span>
</div>
</md-toolbar>
<md-dialog-content>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Link">
<md-content class="md-padding">
<div layout="row">
<div flex>
<!-- Add new action -->
<div layout="column" layout-gt-xs="row" class="new-entry-line">
<div flex-gt-sm="50">
<md-input-container class="md-block">
<input ng-model="DialogCtrl.tempLinkAttachment.Title" placeholder="Title...">
</md-input-container>
</div>
<div flex-gt-sm="50">
<md-input-container class="md-block">
<input ng-model="DialogCtrl.tempLinkAttachment.Link" placeholder="Link..." ng-keypress="DialogCtrl.addTempAttachment($event, 'link')">
</md-input-container>
</div>
</div>
</div>
</div>
<div layout="row">
<div flex>
<md-list>
<md-list-item md-2-line ng-repeat="attachment in DialogCtrl.tempAttachments | filter: {'category': 'link'}">
<md-icon md-svg-icon="content:ic_link_24px"></md-icon>
<p>{{ attachment.title }}</p>
</md-list-item>
</md-list>
</div>
</div>
</md-content>
</md-tab>
<md-tab label="File">
<md-content class="md-padding">
<div layout="row" layout-align="center">
<md-button flex="30" class="md-primary md-raised">Upload</md-button>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button ng-click="answer('Not useful')">
Not Useful
</md-button>
<md-button ng-click="answer('Useful')">
Useful
</md-button>
</md-dialog-actions>
</form>
</md-dialog>