i using angular material, , have action in tasksctrl opens $mddialog - using locals property pass object modified in dialogctrl before being sent view.
however, .then() callbacks not fire on ng-click. if hardcode scope variable printed out elsewhere in dialog, can see ng-click changing value, way .then() fire clicking outside of 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 template file $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>
this how pass data dialog main controller - codepen
$scope used, mentioned in docs:
note: important set preservescope 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
Post a Comment