标签: mddialog

我有一个组件,用于Angular Material MdDialog:

@Component({
  ...
})
export class MyComponent {

  constructor(@Inject(MD_DIALOG_DATA) public data: any, public dialogRef: 
MdDialogRef<MyComponent>) {
...
  }


}

我试图用Jasmine进行单元测试:

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        SharedTestingModule,
      ],
      declarations: [
        MyComponent,
      ],
    })
    .compileComponents();
  }));

  ...

});

不幸的是,我收到以下错误:

错误:没有InjectionToken MdDialogData的提供程序!

SharedTestingModule导入和导出我的自定义Angular Material模块,该模块本身导入并导出MdDialogModule.

我怎样才能摆脱这个错误？

非常感谢你!

Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3

我正在使用MdDialogModule来显示一个带有输入字段的Dialog窗口.Modal打开正常,我可以在输入字段中输入文本并提交,但是点击提交按钮,我希望输入表单中的数据返回到调用Dialog组件的主组件,并关闭对话框.

我该怎么做呢？我能够将数据传递给MdDialog组件,但没有找到任何关于如何从MdDialogComponent将数据返回到组件的资源.

我的Dialog组件代码如下所示

import { Component, OnInit, InjectionToken, Inject } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from "@angular/material";

@Component({
  selector: 'app-add-book',
  templateUrl: './add-book.component.html',
  styleUrls: ['./add-book.component.css']
})
export class AddBookComponent {

  constructor() { }

}

调用对话框的主要组件中的方法如下所示.现在没有返回任何响应,它返回Undefined,因为我还没有想出来.

openCreateDialog() {
    let dialogRef = this.dialog.open(AddBookComponent)
      .afterClosed()
      .subscribe(response => {
        console.log(response);
      });
  }

我使用$mdDialog推荐的方式使用Angular 1.5 Material Design controllerAs: "dialog".在模板中,我有一个表格:<form name="fooForm".在模板中,我可以毫无问题地访问表单,例如ng-disabled="fooForm.$invalid || fooForm.$submitted".

但是如何从$mdDialog控制器中访问该表单？根据我的阅读,我希望能够做到这一点:

    const doFoo = () => {
        if (this.fooForm.$dirty) {

这this是对话框控制器.

但我得到一个错误:TypeError: Cannot read property '$dirty' of undefined.果然,如果我在代码中放置断点,控制器就没有fooForm属性.

我也尝试过使用$scope,但是当我在代码中放置断点时$scope也没有fooForm属性.

这是我的对话框模板:

<md-dialog aria-label="FooBar">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>FooBar</h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="dialog.cancel()">
        <md-icon>close</md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <form name="fooForm" ng-submit="dialog.ok()" novalidate>
    <md-dialog-content>
      <div layout="column" layout-padding>
        <h2 class="md-headline">Foo</h2>
        <div layout="row" layout-xs="column">
          ...
      </div> …

我正在创建一个有角度的邮箱.当发送消息的弹出窗口关闭时,我需要保存草稿消息.

我知道有一些选择:

scope.$on("$destroy", function () { saveMessage() });

和:

$mdDialog.show(...).finaly(function(){ saveMessage() });

但两者都不足够:

• 当Dialog已经关闭时,第一个被调用.这是由于要求不可接受(有一个需要打开的iFrame)
• 第二个是在mdDialog的控制器范围之外,并且负责弹出窗口的调用者,而它应该在弹出窗口中.

所以我正在寻找在弹出窗口实际关闭之前调用函数的方法.就像是scope.$on("$mdDialogBeforeClose", function () { saveMessage() });

另一个选择是挂钩每个关闭事件.看起来很难看,但可能是解决方案.在这种情况下,我需要听取转义按钮并在弹出窗口外单击(Altough我可能会禁用该功能)...

有更好的想法吗？

谢谢!

编辑:

另外一个问题:如何捕获escape-keypress事件？我试过<md-dialog aria-label="List dialog" ng-keypress="keyPress($event)">但它甚至没有被触发......

我试图使用配置传递一些属性值.但对话框无法全屏显示.

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

如何根据分辨率打开对话框全屏？

我是css的新手,无法正确设置确认对话框的最大宽度.这是我调用对话框的代码:

this.$mdDialog.show({
  content: longText,
  ok: 'OK',
  cancel: 'CANCEL'
  clickOutsideToClose: true,
});

问题是我longText没有携带,我的对话框水平拉伸.我尝试在style.less本地添加并确定max-width如下:

.md-dialog {
  max-width: 300px;
}

但没有变化.有人可以帮助我吗？

目标:使用组件而不是使用$ scope来设置数据.没有要共享的错误,问题是对话框加载组件时未设置数据元素.屏幕截图显示了对话框的当前状态,应该在选项卡#2(信息)中绑定一个对象.在使用onComplete事件加载对话框后,我可以验证对象(文档)是否可用.我试图通过以下方式将对话框调用可用的数据绑定到组件:

1使用当地人:

  locals: {
         document: document     
  },
  bindToController: true,
  onComplete: function(){
                    console.log('document: %O', document);
  }

2使用绑定:

   bindings: {
         document: '='
    }

3使用解决方法:

  resolve: {
              document: function() {
                          return document;
                        }
            }

组件:

我相信错误在这里,绑定,"旧方式"使用$ scope vars所以绑定毫不费力地连接.

(function(){
'use strict';
angular.module('adminClientApp')
.component('documentEdit', {
    templateUrl: 'js/app/components/document/documentEdit/document-edit.html',
    controller: function DocumentEditController($mdToast, $mdMedia) {
       var var documentEdit = this;
        documentEdit.document;

       },
       bindings: {
         document: '<'
       }
    });
  })();

对话框调用

DialogController中只有$ mdDialog事件.我意识到locals和bindToController都是针对对话框中指定的控制器(DialogController).我在这里难过 - 如何设置/传递/连接文件到组件控制器？

   this.showEdit = function ($event, document) {
                var parentEl = angular.element(document.body);

                $mdDialog.show({
                            parent: …

我正在使用angular-1.5.8,d3-3.5.17,nvd3-1.8.5和angular-nvd3-1.0.9与Angular Material.我正在尝试将NVD3指令放入$mdDialog.源代码很简单:

<md-dialog aria-label="FooBar">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>FooBar/h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="dialog.close()">
        <md-icon>close</md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <md-dialog-content>
    <nvd3 options="dialog.options" data="dialog.data"></nvd3>
  </md-dialog-content>

  <md-dialog-actions>
    <md-button ng-click="dialog.close()">
      Close
    </md-button>
  </md-dialog-actions>
</md-dialog>

我使用$mdDialog.show()带fullscreen: true.如你所知fullscreen: true,如果浏览器窗口足够小,对话框只会全屏显示.

无论如何,我对类型图表有很多问题scatterChart.这里有几个大的:

• 16点的散点图显示真的非常小!我不想在宽度/高度上进行硬编码.是否有一个NVD3的缩放选项,说"显示你通常会增加的尺寸"？
• 如果我让浏览器(Chrome)足够小,mdDialog会突然弹出全屏!并且NVD3图表动态扩展以填充整个宽度!太酷了!但图表的高度保持不变.现在我有一张宽度很小的宽图表; mdDialog关闭按钮几乎位于屏幕顶部,下方有一个巨大的空白.
• 如果我手动设置<md-dialog-content style="min-width=500px;min-height=300px">只是一个例子,同样的事情发生:NVD3电荷水平扩展以填充宽度,但图表下方,关闭按钮上方有一个巨大的空白区域.

如何让NVD3图表与mdDialog很好地配合,并填充整个对话框内容区域？

我正在尝试使用Angular 2中的对话框组件@angular/material2.0.0-beta.1.我想要完成的是发送数据(这是人们从界面中选择的值,该对话框用于使人确认他们选择的值)到对话框并显示它.所以例如对话框应该这样说:

你选择了:

选项1:价值

选项2:价值

选项3:价值

取消| 确认

如何将这些值传递给我创建的对话框,以便我可以像查看模板中的{{value}}一样访问它们？我认为它使用数据配置,但我似乎无法找到关于如何使用它的好文档或示例.这是我一直在尝试的:

let config = new MdDialogConfig().data();
let dialogRef = this.dialog.open(DialogComponent);

DialogComponent

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
   selector: 'dialog',
   template: require('./dialog.component.pug'),
   styleUrls: [
     './dialog.component.scss'
   ]
})

export class DialogComponent {
   constructor(public dialogRef: MdDialogRef<DialogComponent>) {}
}

第一次用$ mdDialog工作我习惯用外部HTML模板创建一个对话框.

到目前为止,这么好,...它的工作模板可以打开,但在HTML中的ng-click不再工作.

我找不到它的原因.

在userController中调用mdDialog,如下所示:

<md-icon
        layout="row"
        flex md-font-set="material-icons"
        class="active"
        ng-click="vm.showMenu($event)">
    menu
</md-icon>

在userController中打开$ mdDialog的方法:

vm.showMenu = function showMenu(ev){

    $mdDialog.show({
        controller: MenuDialogController,
        templateUrl: 'app/components/head/user/menu.dialog.html',
        parent: angular.element($document.body),
        targetEvent: ev,
        clickOutsideToClose:true,
        fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    })
        .then(function(answer) {
            $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
            $scope.status = 'You cancelled the dialog.';
        });
};

这是对话框的对话框控制器,按钮不起作用:

angular
    .module('trax')
    .controller('MenuDialogController', MenuDialogController);

function MenuDialogController() {

    var vm = this;

    vm.close = function close(){
        alert('close …