在我的md对话框中无法访问Angular-Material，AngularJS，TypeScript，Javascript，ng-controller

Question

我的代码中有一个问题，我正在尝试使用ng-controller调用我的用户（在索引上声明'ng-controller =“mainController as vm”'）我可以在我的代码中使用它访问用户并获取他的电子邮件和图像。 但是现在我希望能够在你点击我的图像时打开一个md对话框，这样图像就可以在对话框中放大，我的对话框打开但是我无法访问我的控制器（vm）来说明他要显示的图像。

这将打开我的内容页面中的图像：

<img src="{{vm.selected.item4}}" />

顺便说一下

这就是我打开对话框的方式：

<md-button ng-click="vm.showDialog($event)" >
            <img src="{{vm.selected.item1}}"/>
</md-button>

我的对话框打开但它不会显示图像...有没有人知道如何解决这个问题？

（如果我的主题或问题的格式不正确，请先对不起，我对此很陌生，因此，如果某些内容不符合我的要求，请纠正我。）

Answer 1

有几种方法可以将值从父作用域传递到对话框。 以下是3个示例用法。 你可以使用这个codepen来玩它们。

.controller('AppCtrl', function ($scope, $mdDialog) {

  $scope.imageUrl = "https://upload.wikimedia.org/wikipedia/commons/1/18/Bradypus.jpg";

    // Show the image in the dialog by using parent scope directly in the template.
  $scope.showDialog = function(ev) {
    $mdDialog.show({
      template: '<img src="' + $scope.imageUrl + '"></img>',
      parent: angular.element(document.querySelector('#popupContainer')),
      targetEvent: ev,
      clickOutsideToClose: true,
      ariaLabel: 'Dialog 1',
    });
  }

  // Get the image from the function call and use directly in the template
  $scope.showDialog2 = function(ev, image) {
    $mdDialog.show({
      template: '<img ng-src="' + image + '"></img>',
      parent: angular.element(document.querySelector('#popupContainer')),
      targetEvent: ev,
      clickOutsideToClose: true,
      ariaLabel: 'Dialog 2'
    });
  }

  // Show the image by defining locals. This is the most elegant way, 
  // IMO. You can make any value available by defining locals. After 
  // defining locals, you can use the defined locals in your dialog 
  // controller. After you get the locals from your controller, you can 
  // easily use them in your dialog's template.
  $scope.showDialog3 = function(ev) {
    $mdDialog.show({
      template: '<img ng-src="{{image}}"></img>',
      parent: angular.element(document.querySelector('#popupContainer')),
      targetEvent: ev,
      clickOutsideToClose: true,
      ariaLabel: 'Dialog 3',
      locals: {image: $scope.imageUrl},
      controller: function($scope, $log, image) {
        $scope.image = image;
      }
    });
  }

});

HTML：

<div ng-app="MyApp">
  <div ng-controller="AppCtrl">
    <md-content id="popupContainer" style="height: 500px;">

      <md-button class="md-raised md-primary" ng-click="showDialog($event)">
        Open Dialog
      </md-button>
      <md-button class="md-raised md-primary" ng-click="showDialog2($event, imageUrl)">
        Open Dialog 2
      </md-button>
      <md-button class="md-raised md-primary" ng-click="showDialog3($event)">
        Open Dialog 3
      </md-button>

    </md-content>
  </div>
</div>

您还可以查看文档中的示例。