如果 angular-ui-layout 在 angular 视图中，我如何让它留在它的容器中？

Question

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

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

但是，如果它在 angular 视图中的指令中，那将不起作用，它在生成之前不存在，并且可能无法说明此时 100% 是多少.除非您硬编码 height:400px，这不是很灵活。

怎么办？

Answer 1

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

1。创建一个减去所有其他元素的调整大小函数：

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。创建控制器，并在其中首先在初始化时调用调整大小函数，然后将侦听器连接到 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();
        })
    });
}]);

如果 angular-ui-layout 在 angular 视图中，我如何让它留在它的容器中？

How do I make angular-ui-layout stay within its container if it's in an angular view?

javascript

css

angularjs

angular-ui