Как передать данные в шаблон с помощью диалогового окна AngularJS Material - PullRequest
0 голосов
/ 16 мая 2018

Я создаю простое приложение для комментариев с AngularJS Material, я хочу, чтобы диалоговое окно редактирования комментариев отображалось с телом комментария и электронной почтой пользователя как двусторонняя привязка данных, но потому что я использую диалог с templateUrlЯ не могу понять, как передать данные комментария в этот URL-адрес для редактирования.

    function DialogController($scope, $mdDialog) {
      
      $scope.hide = function() {
        $mdDialog.hide();
      };
    }

    $scope.editComment = function(comment) {
      $mdDialog.show({
        controller: DialogController,
        templateUrl: 'dialog.html',
        parent: angular.element(document.body),
        targetEvent: event,
        clickOutsideToClose:true,
        fullscreen: $scope.customFullscreen,
        locals: {
          comments: $scope.comments
        }
      });
      $scope.comment = comment;
      console.log(comment);
    };
    <!-- Comments cards -->
    <div class="container">
      <div ng-repeat="($index,comment) in comments" style="margin-top:50px;">
        <div class="md-title">Comment: {{ $index + 1 }}</div>
        <br>
        <md-card>
          <md-content layout="row">
            <div class="flex-90">
              <md-card-content class="md-title">
                  {{comment.body}}
              </md-card-content>
              <md-chips>
                <md-chip> {{comment.email}} </md-chip>
              </md-chips>
            </div>
            <div class="flex" layout="row" layout-align="end start">
              <md-button class="md-icon-button"
                         ng-click="editComment(comment)">
                         <md-icon>edit</md-icon>
              </md-button>
              <md-button class="md-icon-button"
                         ng-click="deleteComment($event, comment)">
                         <md-icon>clear</md-icon>
              </md-button>
            </div>
          </md-content>
        </md-card>
      </div>
    </div>

1 Ответ

0 голосов
/ 16 мая 2018

Я думаю, это то, чего вы пытаетесь достичь.

Итак, пошли по шагам.

  • Вы должны передать объект комментария контроллеру
  • Затем присвойте этот параметр области видимости вашего диалога, если вы не хотите, чтобы он был двухсторонним связыванием, либо используйте angular.copy или Object.assign.
  • После этого в функции close вы должны передать в качестве параметра этот объект комментария, а затем назначить его вашему родительскому объекту комментария области видимости, чтобы он там изменился.

    function DialogController($scope, $mdDialog, comments) {
      $scope.comment = Object.assign(comments);

      $scope.hide = function() {
        $mdDialog.hide();
      };
      
      $scope.editComment = function () {
        $mdDialog.hide($scope.comment);
      }
    }

    $scope.editComment = function(comment) {
      $mdDialog.show({
        controller: DialogController,
        templateUrl: 'dialog.html',
        parent: angular.element(document.body),
        targetEvent: event,
        clickOutsideToClose:true,
        fullscreen: $scope.customFullscreen,
        locals: {
          comments: comment
        }
      }).then(function (result) {
        comment = result;
      });
      console.log(comment);
    };
    <!-- Comments cards -->
    <div class="container">
      <div ng-repeat="($index,comment) in comments" style="margin-top:50px;">
        <div class="md-title">Comment: {{ $index + 1 }}</div>
        <br>
        <md-card>
          <md-content layout="row">
            <div class="flex-90">
              <md-card-content class="md-title">
                  {{comment.body}}
              </md-card-content>
              <md-chips>
                <md-chip> {{comment.email}} </md-chip>
              </md-chips>
            </div>
            <div class="flex" layout="row" layout-align="end start">
              <md-button class="md-icon-button"
                         ng-click="editComment(comment)">
                         <md-icon>edit</md-icon>
              </md-button>
              <md-button class="md-icon-button"
                         ng-click="deleteComment($event, comment)">
                         <md-icon>clear</md-icon>
              </md-button>
            </div>
          </md-content>
        </md-card>
      </div>
    </div>
...