将图像传递给$mdDialog

Pass image to $mdDialog

本文关键字：mdDialog 图像      更新时间：2023-09-26

我正在尝试将 Ng-repeat 传递给我的$mdDialog但没有找到太多有关如何执行此操作的文档。我一直在参考这个堆栈，但我没有运气将图像传递给模态。

在控制台中，我收到一条错误消息：

TypeError: Cannot read property 'element' of undefined

控制台错误且未将映像传递到模态的原因是什么？

.HTML

<md-grid-tile 
    ng-repeat="image in imageBucket.images"
    md-rowspan="{{image.row}}"
    md-rowspan-gt-lg="{{image.rowgtlg}}"
    md-colspan="{{image.col}}"
    md-colspan-gt-lg="{{image.colgtlg}}"
    class="white" >
    <md-button 
        class="" 
        ng-click="showAdvanced($event, image)" 
        flex="100" 
        flex-gt-md="auto">
        <img 
            aria-label="kpinsonstairs" 
            class="img-responsive md-whiteframe-6dp" 
            src="{{image.src}}" 
            alt="Gallery Picture">
            <md-grid-tile-footer>
                <h3>{{image.title}}</h3>
            </md-grid-tile-footer>
    </md-button>
</md-grid-tile>

爪哇语

(function () {
  'use strict';
    angular
        .module('resonance.gallery.controllers')
        .controller('GalleryOneController', GalleryOneController);
    GalleryOneController.$inject = [
        '$scope',
        '$mdDialog',
        'ImageService'
    ];
    function GalleryOneController($scope, $mdDialog, ImageService) {
      ImageService.success(function(data) {
        $scope.imageBucket = data;
      });

      $scope.showAdvanced = function(ev, image) {
        $mdDialog.show({
          clickOutsideToClose:true,
          controller: function($mdDialog) {
            var vm = this;
            var image = {};
            var image = image;
            $scope.hide = function() {
              $mdDialog.hide();
            }
            $scope.cancel = function() {
              $mdDialog.cancel();
            };
          },
          controllerAs: 'modal',
          templateUrl: 'client/gallery/views/dialog.ng.html',
          parent: angular.element(document.body),
          targetEvent: ev
        });
      };
    }
})();

模态网页

<img 
     class="img-responsive md-whiteframe-6dp" 
     src="{{modal.image.src}}" 
     alt="Gallery Picture">

如果您查看 角度材料的文档 ，您将看到有一个选项可以使用 locals 关键字将内容解析为模态的控制器。 所以你必须将函数重写为： 

$scope.showAdvanced = function(ev, image) {
    $mdDialog.show({
        clickOutsideToClose: true,
        controller: function($mdDialog, image) {
            var vm = this;
            vm.image = image;
            $scope.hide = function() {
                $mdDialog.hide();
            };
            $scope.cancel = function() {
                $mdDialog.cancel();
            };
        },
        controllerAs: 'modal',
        templateUrl: 'client/gallery/views/dialog.ng.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        locals: {
            image: image
        }
    });
};

那应该有效.

相关文章：