Question

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

这会在我的内容页面中打开图片：

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

完美地工作

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

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

我的对话框已打开但无法显示图片... 有没有人知道如何解决这个问题？

（如果我的主题或问题没有正确形成我很抱歉，我是新手，所以如果有什么不喜欢它的话，请纠正我到...）

Answer 1

有几种方法可以将值从父作用域传递到对话框。以下是3个示例用法。您可以使用this 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>

您还可以查看the docs中的示例。

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

1 个答案: