Angular ui layout - how to update sizes when something changes?

Question

I recently started using angular ui-layout
I have a 3 panel view. The right-most panel is optional and only appears occasionally, I hide it and show it with ng-if .

If ng-if is false, the size is not recalculated, and the middle panel does not occupy the rest of the horizontal space.

 <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> 

If ng-if false, main takes up all the space after the sidebar, if it becomes true, the space for the 3rd panel is assigned correctly, but if it becomes false again, the space will not be restored.

Ideas?

Answer 1

I would prefer a better solution, but you can put your ng-if test on two div using the ui-layout element with opposite boolean ratings. This is not so bad for solving my situation, because I use Jade .

Example (in 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