Question

我在Angular中很新，并且有关于大小/布局的以下问题。

想象一下，你有这种自定义指令：

在上面的场景中，假设您希望<main-ui>获取整个视口宽度和高度，<content-ui>将获取整个视口的宽度和高度，但会降低<header-ui>高度。

你会采用什么方法通过Angular来确保<content-ui>高度总是按照要求进行，最初和窗口调整大小？

引用<content-ui>和window以及执行计算时，<header-ui>应该自行计算其高度吗？

提前致谢！

Answer 1

我认为与角度无关。我会为标题和内容创建一个css类，并在那里定义高度，显示等等。在您的情况下，可能是绝对位置，标题顶部为0，高度为40px，内容顶部为40px（数字为例）。所以你得到了

<main-ui>
<header-ui class="app-header"></header-ui>
<content-ui class="app-content"></content-ui>
</main-ui>

Answer 2

sagie gur-ari是正确的，这与Angular根本没有关系。您需要使用的只是CSS。

＆＃13;

html, body, .viewport {
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
    padding: 0;
    margin: 0;
}

.viewport {
    display: flex;
    flex-direction: column;
}

.header {
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
    height: 50px;
    background-color: red;
}

.content {
    flex: 1 1 auto;
    background-color: blue;
}

＆＃13;

<div class="viewport">
    <div class="header"></div>
    <div class="content"></div>
</div>

＆＃13;

关于如何通过指令将其添加到功能中，您将在指令的编译函数中设置CSS类。

module.directive('appHeader', function() {
    return {
        compile: function ($element, $attrs) {
            $element.addClass('appHeader');
            return {
                pre: function (scope, element, attrs, controllers) {

                },
                post: function (scope, element, attrs, controllers) {

                }
            };
        }
    };
});

Angular中的大小/布局指令取决于其他指令

2 个答案: