Angular-Material 、 AngularJS 、 TypeScript 、 Javascript 、 ng-controller 在我的 md-dialog 中无法访问

Posted 2023-03-13

【中文标题】Angular-Material 、 AngularJS 、 TypeScript 、 Javascript 、 ng-controller 在我的 md-dialog 中无法访问

【英文标题】：Angular-Material , AngularJS , TypeScript , Javascript , ng-controller not accessible within my md-dialog

【发布时间】：2016-07-08 04:39:05

【问题描述】：

我的代码有问题，我正在尝试使用 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>

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

（如果我的主题或问题没有正确形成，我很抱歉，我是新手，如果有什么不正确的地方，请纠正我......）

【问题讨论】：

你能显示整个代码吗？如果可能的话，一支笔会很棒

我会尽量把项目做得更小，这样我就可以做一支笔了，现在它有很多文件了：D

该死的，很难用它来做笔...因为它是材料设计，仅此一项就需要调用多个文件（css 等），而且我有多个 .js 和 .ts 文件在我的项目中...我今天将尝试将网站上线，以便您可以使用开发工具对其进行检查

只是硬编码值并做一个小例子。

或者只是你在 $mdDialog.show 或 vm.showDialog($event) 中使用的代码

【参考方案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的例子。

【讨论】：

Thnx Turgut 这对我帮助很大

Turgut，你熟悉 TypeScript 吗？为什么它不能用它？它使用“普通的javascript”工作

对不起托尼。我不熟悉 TypeScript。