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

Question

根据 discussion at Github不能定位 standard dialog ( api )，但 panel dialogs ( api ) 可以定位。

A simplified demo表明这是真的:

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

Angular Material docs显示一个允许相对于被点击元素(或任何传入的元素)进行定位的方法。但是，我无法让它工作。

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

例如，为 .top() 和 .right() 传递硬值，允许相对于视口(viewport)定位。不过，我无法获得相对于单击元素的定位。这应该如何工作？

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 的可接受参数它们是:

Panel y position only accepts the following values: center | align-tops | align-bottoms | above | below

Panel x Position only accepts the following values: center | align-start | align-end | offset-start | offset-end

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

我再指出一个我见过的问题。

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

密码本

我拿了他们的演示并将其真正缩小以专注于这个问题。可以看到更新后的codepen here