将图片传递给$ mdDialog

Question

我试图将一个Ng重复传递给我的$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关键字将内容解析到模式的控制器。所以你将不得不重写函数为：

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

这应该工作。