如何相对于按钮定位Angular Material面板对话框？

Question

根据Github的讨论,无法定位标准对话框(api),但可以定位面板对话框(api).

一个简化的演示表明,这是真的:

var position = this._mdPanel.newPanelPosition().bottom(0).right(0);

的角材料文档显示方法,其允许相对于所述点击的元素的定位(或任何传入).但是,我无法让它工作.

var target = el.target;
var position = this._mdPanel.newPanelPosition().relativeTo(target); 

在用于硬值传递.top()和.right(),例如,允许相对于视定位.但是,我无法获得相对于被点击元素的定位.这应该怎么样？

Answer 1

我在过去的几个月里一直在使用Angular Material,但仍然发现文档缺乏,所以原谅这篇文章的篇幅是关于这个问题的伪文档.但这就是我所知道的:

通过将addPanelPosition函数链接到函数上,我只能使面板位置相对于目标元素工作relativeTo:

var position = this._mdPanel
  .newPanelPosition()
  .relativeTo(ev.target)
  .addPanelPosition('align-start', 'below') // or other values

(在这种情况下,ev是ng-click传递的$ event对象)

我能够追踪可接受的参数addPanelPosition,它们如下:

面板y位置仅接受以下值:center | align-tops | 对齐底部| 以上| 下面

面板x位置仅接受以下值:center | align-start | align-end | offset-start | 偏移结束

足够多,在Angular Material演示中,他们使用this._mdPanel.xPosition.ALIGN_START和this._mdPanel.yPosition.BELOW属性简单地解析为字符串作为addPanelPosition函数的x和y值.我总是直接使用字符串值.但是,如果此功能的开发仍在不断变化并且它们更改了可接受的字符串值,则使用字符串值可能会出现问题.

我会指出我见过的另一个问题.

他们在演示中使用的另一个技巧是在relativeTo函数中指定类名而不是目标元素,然后将该类放在目标元素本身上.这种方法有用的原因是因为来自ng-click的$ event对象可以根据点击的确切内容提供不同的目标元素.例如,单击按钮<div>将提供与单击<span>按钮内的文本不同的目标.这将导致您的面板移动位置,除非您提供不这样做的附加功能.

Codepen

我拿了他们的演示,然后把它缩小到适合这个问题.您可以在此处查看更新的代码集