我在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>
答案 0 :(得分:0)
如果其他人发现这一点,我最终在我的指令控制器中添加了一个函数,该函数在面板关闭链接上的ng-click上被调用。
positionOverlayPanel() {
const overlayPanel = document.getElementById('assetDetailOverlayPanel');
angular.element(overlayPanel)
.css('top', `${this._$element[0].offsetTop}px`);
}
它不漂亮,我确信有更好的方法,但它有效!