0

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();
      };
    }

小さな助けをありがとう!

4

0 に答える 0