angular-material を使用して小さなプロジェクトを行っており、mdDialog を使用しているため、ダイアログを閉じるたびにビューをクリックできません。ダイアログが DOM に挿入される場所に問題があると思いましたか?
すべてのダイアログに同じコントローラーを使用しています (多くの機能はありません)。
ダイアログの html の 1 つを次に示します。
<md-dialog aria-label="Attention Information" class='custom-dialog info-task-dialog'>
<md-dialog-content>
<md-card>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Attention Information</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="hideDialog()">
<md-icon class="close-dialog" md-svg-src="../../img/close.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content">
<span class='md-caption'>
<strong>Customer Name: </strong>{{ attentionInfo.CustomerName }}
</span>
<p class='md-caption'>
<strong>Reason: </strong>{{ attentionInfo.Reason }}
</p>
<p class='md-caption'>
<strong>If they open a case: </strong>{{ attentionInfo.If }}
</p>
<p class='md-caption'>
<strong>Please revise again on: </strong>{{ attentionInfo.Revise }}
</p>
</div>
</md-dialog-content>
</md-card>
</md-dialog-content>
</md-dialog>
ダイアログとコントローラーを開くコードは次のとおりです。
$scope.openAddTaskDialog = function($event){
actionType = 'add';
$mdDialog.show({
parent: angular.element(document.body.getElementsByClassName('task-container')),
targetEvent: $event,
templateUrl: 'templates/tasks/addtask.html',
controller: MoreTaskController,
scope: $scope,
clickOutsideToClose:true
})
.then(function() {
}, function() {
});
}
$scope.openTaskInfo = function($event) {
actionType = 'info';
$mdDialog.show({
parent: angular.element(document.body.getElementsByClassName('task-container')),
targetEvent: $event,
templateUrl: 'templates/tasks/moretask.html',
controller: MoreTaskController,
scope: $scope,
clickOutsideToClose:true
})
.then(function() {
}, function() {
});
};
$scope.openTaskEdit = function ($event) {
actionType = 'edit';
$mdDialog.show({
parent: angular.element(document.body.getElementsByClassName('task-container')),
targetEvent: $event,
templateUrl: 'templates/tasks/edittask.html',
controller: MoreTaskController,
scope: $scope,
clickOutsideToClose:true
})
.then(function() {
}, function() {
});
};
function MoreTaskController($scope, $mdDialog) {
switch (actionType){
case 'edit':
$scope.editTask = taskChosen;
$scope.editTask.Until = moment(new Date(moment(taskChosen.Until, "YYYY/MM/DD HH:mm"))).format('DD/MM/YYYY HH:mm');
console.log($scope.editTask.Until);
break;
case 'add':
$scope.newTask = {
SFNumber: '',
PartnerName: '',
Until: '',
Class: '',
Action: ''
}
break;
case 'info':
$scope.taskInfo = taskChosen;
break;
}
$scope.customerClasses = ['Gold', 'Silver', 'Platinum'];
$scope.AddTask = function(){
$scope.newTask.Until = $scope.taskForm.field.$modelValue;
TasksService.AddTask($scope.newTask, function(response){
if (response.success && response.data === "1"){
$scope.GetOpenTasks();
$scope.hideDialog();
} else {
// ErrorAlert();
}
});
}
$scope.UpdateTask = function(){
$scope.editTask.Until = $scope.taskForm.field.$modelValue;
TasksService.UpdateTask($scope.editTask, function(response){
if (response.success && response.data === "1"){
$scope.GetOpenTasks();
$scope.hideDialog();
} else {
// ErrorAlert();
}
});
}
$scope.hideDialog = function() {
$mdDialog.hide();
};
}
小さな助けをありがとう!