C Ivemy C Ivemy - 3 months ago 93
AngularJS Question

ng-click doesn't fire $mdDialog callback

I am using Angular Material, and have an action in TasksCtrl that opens a $mdDialog - using the locals property to pass an object that will be modified in DialogCtrl before being sent back to the view.

However, the .then() callbacks do not fire on ng-click. If I hardcode a scope variable that is printed out elsewhere in the dialog, I can see the ng-click changing the value, however the only way to get the .then() to fire 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>

Answer

This is how I would pass data from the dialog to the main controller - CodePen

$scope is used, as mentioned in the docs:

enter image description here

Note: it is important to set preserveScope to true.

JS

angular.module('ICP_App',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('TasksController', function($scope, $mdDialog) {
  var vm = this;
  vm.createTaskAttachment = function(ev) {
    $mdDialog.show({
      controller: 'DialogController',
      controllerAs: 'DialogCtrl',
      templateUrl: 'create-task-attachment.tmpl.html',
      parent: angular.element(document.body),
      scope: $scope,
      preserveScope: true,
      targetEvent: ev,
      clickOutsideToClose:true
    })
      .then(function(answer) {
      alert('you submitted - ' + answer);
    }, function() {
      alert('you cancelled it');
    });
  };

  $scope.$watch("vm.selectedTask", function () {
    if (angular.isDefined(vm.selectedTask)) {
      $mdDialog.hide(vm.selectedTask);
    }
  })
})

.controller('DialogController', function($scope, $mdDialog) {
  $scope.answer = function(answer) {
    $scope.vm.selectedTask = answer;
  }
})
Comments