Javascript 如何相对于按钮定位“角度材质”面板对话框？

根据a，不能定位a（），但（）可以定位

A表明这是正确的：

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

显示允许相对于单击的元素（或传入的任何内容）进行定位的方法。然而，我无法让它工作

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

---

例如，为

.top（）

和

.right（）

传入硬值可以相对于视口进行定位。但是，我无法获得相对于单击元素的位置。这是怎么回事？

过去几个月来，我一直在研究棱角材料，但仍然发现缺少相关文档，所以请原谅我在这篇文章中的篇幅，因为我是关于这个问题的伪文档。但我知道的是：

通过将

addPanelPosition

函数链接到

relativeTo

函数，我只能使面板相对于目标元素的位置正常工作：

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

（在本例中，

ev

是ng click传递的$event对象）

我能够找到

addPanelPosition

的可接受参数，它们如下所示：

面板y位置仅接受以下值： 居中|顶部对齐|底部对齐|上方|下方

面板x位置仅接受以下值： 居中|对齐起点|对齐终点|偏移起点|偏移终点

有趣的是，在Angular Material演示中，他们使用了

this.\mdPanel.xPosition.ALIGN.\u START

和

this.\mdPanel.yPosition.BELOW

属性，这些属性将字符串解析为

addPanelPosition

函数的x和y值。我总是直接使用字符串值。但是，如果此功能的开发仍在进行中，并且它们更改了可接受的字符串值，则使用字符串值可能会有问题

我将指出我看到的另一个问题

他们在演示中使用的另一个技巧是在

relativeTo

函数中指定一个类名，而不是目标元素，然后将该类放在目标元素本身上。这种方法之所以有用，是因为ng click中的$event对象可以根据单击的内容提供不同的目标元素。例如，单击按钮

将给出与单击按钮内的

文本不同的目标。这将导致您的面板移动位置，除非您提供了不这样做的附加功能

Codepen

---

我拿了他们的演示，真的把它缩小到了一个小尺寸来关注这个问题。您可以看到更新的codepen对话框是非常简单的小部件。捕捉焦点是他们做的最复杂的事情。你的问题已经演变成如此复杂的问题，这使我感到痛苦

简单地说，由于配置了类名，您可以完全控制任何单个对话框的定位

.demo-dialog-example {
    top: 20px;
    left: 20px;
}

另外，在showDialog方法中，为什么不通过对open方法的承诺设置回调？比如：

this._mdPanel.open(config).then(function() {
    var dialog = angular.element(document.querySelector('.demo-dialog-example'));
    //Centering, positioning relative to target, or draggable logic goes here
});

我尊重您试图改进插件的逻辑并以“角度”的方式做事，但这些相对简单的要求不应该让您如此心痛。

正如我在评论中所说，您可以看到它在plunker上工作

我的解决方案非常接近于@我想我可以对答案进行编码。但是，在我的回答中，单击按钮时会显示一个

，而不是菜单，这是OP中要求的

除了带有对话框的工作plunker之外，没有什么可以添加到好的@I think I can code answer中。如角度材质所示，这里的关键是设置面板相对于按钮的位置。要做到这一点（就像在angular material演示中一样），我们可以使用特定的css类（

demo dialog open button，在我的示例中为
）来查找目标元素。在我看来，这是一件棘手的事情……但它在这个用例中效果很好（在另一个答案中也有很好的解释）

代码以供参考，有关完整的详细信息，请参见：

html（注意添加到按钮的css类）：

希望它能有所帮助
我同意，但我担心固定CSS定位不是一个理想的解决方案。我所读到的表明，定位可以动态进行。
<md-button class="md-primary md-raised demo-dialog-open-button" ng-click="ctrl.showDialog($event)">
   Dialog 
</md-button>

var position = this._mdPanel.newPanelPosition()
      .relativeTo('.demo-dialog-open-button')
      .addPanelPosition(this._mdPanel.xPosition.ALIGN_START, this._mdPanel.yPosition.BELOW);