javascript - 将图像传递给 $mdDialog

Question

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

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

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>

Javascript

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

模态 HTML

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

Answer 1

如果您查看 angular-material 的文档，您将看到有一个选项可以使用 locals 关键字将内容解析到模式的 Controller 。所以你必须将函数重写为:

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

这应该可行。