Angularjs 如何将Foundation Apps zf面板定位在与clickable相同的网格行上
我正在Angular应用程序中使用Foundation应用程序库 我正在尝试创建一个由组件组成的网格(数量不同),当单击该网格时,会导致一个面板位于单击元素所在的行的顶部 面板应覆盖整行,但仅覆盖该行 到目前为止,我得到的更改数据并显示面板ok。但它总是在网格的顶部(在代码中它所处的位置并不奇怪) 你会注意到这个面板实际上包含了一个生成html的指令实例,所以在其中包含这个面板是行不通的(它进入了无限循环) 有什么建议吗 现行守则:Angularjs 如何将Foundation Apps zf面板定位在与clickable相同的网格行上,angularjs,zurb-foundation,zurb-foundation-apps,Angularjs,Zurb Foundation,Zurb Foundation Apps,我正在Angular应用程序中使用Foundation应用程序库 我正在尝试创建一个由组件组成的网格(数量不同),当单击该网格时,会导致一个面板位于单击元素所在的行的顶部 面板应覆盖整行,但仅覆盖该行 到目前为止,我得到的更改数据并显示面板ok。但它总是在网格的顶部(在代码中它所处的位置并不奇怪) 你会注意到这个面板实际上包含了一个生成html的指令实例,所以在其中包含这个面板是行不通的(它进入了无限循环) 有什么建议吗 现行守则: <div class="grid-block wrap"
<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>
如果其他人发现了这一点,我最终在我的指令控制器中添加了一个函数,该函数在单击面板关闭链接时被调用
positionOverlayPanel() {
const overlayPanel = document.getElementById('assetDetailOverlayPanel');
angular.element(overlayPanel)
.css('top', `${this._$element[0].offsetTop}px`);
}
这并不漂亮,我相信有更好的方法,但它是有效的