如何在角度視圖中使angular-ui佈局保留在其容器中？

Question

問題是，內部（參見.stretch CSS類），angular-ui-layout使用絕對定位。 但是，這可以被覆蓋，所以它可能工作只是使其相對並設置heigth到100％：

<div style="height:100%; position: relative;"> 
    <div ui-layout >...</div> 
</div> 

但是，如果是在一個角度視圖一個指令，不工作，它不直到它已經產生，並且可能不能說在那個時候100％是什麼。除非你硬編碼height:400px，這不是很靈活。

怎麼辦？

Answer 1

我選擇的解決方案（實際寫入打字稿，但對於匆匆我沒有使用任何技巧）是：

1。創建一個減去所有其他元素的調整大小函數：

​​

2。將路線與控制器關聯：

app.config(($routeProvider) => { 
    $routeProvider 
     .when('/admin', { 
      templateUrl: 'views/admin.html', 
      controller: "AdminCtrl" 
     }) 
...other routes .... 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
}); 

3。創建控制器，首先在初始化時調用resize函數，然後將偵聽器連接到window.resize函數：

app.controller('AdminCtrl', ["$scope", "$timeout", function($scope, $timeout) { 
    // Wait for all angular stuff to be done. 
    $timeout(function() { 
     // Set height initially 
     resizeNodes(); 
     // Add a watch on window.resize callback 
     $(window).resize(function(){ 
      resizeNodes(); 
     }) 
    }); 
}]);