在我的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>

您還可以查看文檔中的示例。