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.
我正在使用角材质，并在TasksCtrl中有一个动作，打开一个$mdDialog—使用local属性传递一个对象，该对象将在被发送回视图之前在dialog中被修改。
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.
然而，then()回调不会在ng-click上启动。如果我硬编码一个范围变量，在对话框的其他地方打印出来，我可以看到ng-click改变值，但是唯一的方法是通过点击模态的外部来触发。
TasksController (as TasksCtrl)
TasksController(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)
DialogController(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
以及$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>
1 个解决方案
#1
2
This is how I would pass data from the dialog to the main controller - CodePen
这就是我将数据从对话框传递到主控制器CodePen的方法
$scope is used, as mentioned in the docs:
$scope被使用，如文档中所述:
Note: it is important to set preserveScope to true.
注意:将保护罩设置为true是很重要的。
JS
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;
}
})
#1
2
This is how I would pass data from the dialog to the main controller - CodePen
这就是我将数据从对话框传递到主控制器CodePen的方法
$scope is used, as mentioned in the docs:
$scope被使用，如文档中所述:
Note: it is important to set preserveScope to true.
注意:将保护罩设置为true是很重要的。
JS
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;
}
})