0

我在 Angular 应用程序中使用 Foundation-Apps 库。

我正在尝试创建一个组件网格（数量不定），单击该网格时，会导致面板位于单击元素所在行的顶部。

面板应覆盖整行，但仅覆盖该行。

到目前为止，我所拥有的内容会更改数据并正常显示面板。但它始终位于网格的顶部（考虑到它在代码中的位置，这并不令人惊讶）。

您会注意到面板实际上包含生成 html 的指令的实例，因此在其中包含面板将不起作用（它进入无限循环）。

有什么建议么？

代码原样：

<div class="grid-block wrap">
  <div zf-panel="" id="objectDetailOverlayPanel"
   class=" objectDetailOverlayPanel"
   position="left"
   style="width: 100%; height: auto; box-shadow: none;">
<a href="#" zf-close="">
  <img src="..."
       class="float-right"
  />
</a>
<myDirective anObject="vm.selectedObject" expanded="true"/>
</div>
   <!-- generate grid of objects in rows of 4 -->
  <div ng-repeat="anObject in vm.objects" class="grid-content small-3">
    <myDirective anObject="anObject" expanded="false" detail-toggleable="true"
           ng-click="vm.selectedObject = anObject"/>
  </div>
</div>
4

1 回答 1

0

万一其他人发现了这个，我最终在我的指令控制器中添加了一个函数，该函数在 ng-click 面板关闭链接上被调用。

  positionOverlayPanel() {
const overlayPanel = document.getElementById('assetDetailOverlayPanel');

angular.element(overlayPanel)
  .css('top', `${this._$element[0].offsetTop}px`);

}

它不漂亮，我相信有更好的方法，但它有效！

于 2016-02-10T16:55:16.590 回答