Angular ui布局 - 当某些内容发生变化时如何刷新大小？

Question

我最近开始使用角度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,则不回收该空间.

想法？

Answer 1

我更喜欢更好的解决方案，但是您可以使用具有相反布尔评估的元素ng-if对两个divs进行测试。ui-layout对于我的情况来说，这并不是一个糟糕的解决方案，因为我正在使用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