Question

问题在于内部（参见.stretch CSS类），angular-ui-layout使用绝对定位。但是这可以被覆盖，所以它可能只是使它相对并将高度设置为100％：

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

但是，如果它在角度视图中的指令中不起作用，则在生成之前它不存在，并且可能无法说明该点的100％。除非你硬编码height:400px，这不是很灵活。

怎么办？

Answer 1

我选择的解决方案（实际上是用打字稿写的，但对于我没有使用任何技巧的快速）是：

1。创建一个减去所有其他元素的resize函数：

var resizeNodes=function() {
    $("#nodesContainer").height($(window).height() - $("#footerDiv").height() - $("#menuDiv").height())
};

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();
        })
    });
}]);

如果在角度视图中，如何使角度ui布局保持在其容器内？

1 个答案: