Açısal kullanıcı arayüzü düzeni - bir şey değiştiğinde boyutları nasıl yenileyebilirsiniz?

Question

Son zamanlarda angular ui-layout
kullanmaya başladım 3-bölmeli görünüme sahibim. En sağdaki bölme isteğe bağlıdır ve yalnızca bazen gösterilir, gizler ve ng-if ile gösterir.

Eğer ng-false olarak değerlendirilirse, boyut yeniden hesaplanmaz ve orta bölme yatay alanın geri kalanını almaz.

<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 ise o 3 bölmede için uzay doğru tahsis edilir, gerçek olursa, ana, kenar çubuğundan sonuçta yer kaplar, ancak yine yanlış olursa, uzay iadesi değil .

Fikirler?

Answer 1

Daha iyi bir çözüm tercih ederdim, ancak ng-if sınamanızı iki div s üzerinde ui-layout öğesinin karşısına Boole değerlendirmelerine sahip olarak ekleyebilirsiniz. Bu benim durumum için o kadar da kötü bir çözüm değil çünkü Jade kullanıyorum. (Jade)

Örnek:

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