angularjs - Angular ui 布局 - 如何在发生变化时刷新尺寸？

Question

我最近开始使用 angular ui-layout
我有一个 3 Pane View 。最右边的 Pane 是可选的，仅有时显示，我用 ng-if 隐藏和显示它.

如果 ng-if 评估为 false，则不会重新计算大小，并且中间 Pane 不会占用其余的水平空间。

<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 占用了sidebar 之后的所有空间，如果为true，则正确分配第三个pane 的空间，但如果再次为false，则不会回收该空间。

想法？

Answer 1

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