angularjs – Angular ui布局 – 当某些内容发生变化时如何刷新

发布时间：2020-12-17 18:03:55 所属栏目：安全来源：网络整理

导读：我最近开始使用 angular ui-layout 我有一个3窗格视图.最右边的窗格是可选的,有时只显示,我隐藏并用ng-if显示它. 如果ng-if的计算结果为false,则不会重新计算大小,并且中间窗格不会占用水平空间的其余部分. ui-layout options="{ flow: 'column' }" div ui-l

我最近开始使用 angular ui-layout
我有一个3窗格视图.最右边的窗格是可选的,有时只显示,我隐藏并用ng-if显示它.

如果ng-if的计算结果为false,则不会重新计算大小,并且中间窗格不会占用水平空间的其余部分.

<ui-layout options="{ flow: 'column' }">
     <div ui-layout-container size="15%"> sidebar </div>
     <div ui-layout-container min-size="65%"> main </div>
     <div ui-layout-container ng-if="haveSelected()" size="20%"> props </div>
</ui-layout>

如果ng-if为false,则main占用侧边栏后面的所有空格,如果它变为true,则第三个窗格的空间被正确分配,但如果它再次变为false,则不回收该空间.

想法？

解决方法

我希望有一个更好的解决方案,但你可以将你的ng-if测试放在两个div上,并使用ui-layout元素进行相反的布尔评估.这对我的情况来说并不是一个糟糕的解决方案,因为我使用的是 Jade.

示例(在Jade中)：

ui-layout(options="{ flow: 'column' }",ng-if="showThirdPanel")
  div(ui-layout-container)
    include ./firstPanel.jade
  div(ui-layout-container)
    include ./secondPanel.jade
  div(ui-layout-container)
    include ./thirdPanel.jade
ui-layout(options="{ flow: 'column' }",ng-if="!showThirdPanel")
  div(ui-layout-container)
    include ./firstPanel.jade
  div(ui-layout-container)
    include ./secondPanel.jade

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!