AdminLTE 和 AngularJS 内容包装器的最小高度错误 [英] AdminLTE and AngularJS content wrapper wrong min-height

问题描述

我正在尝试将 AngularJS(和 ui.router)与这个模板一起用于部分和模板.(使其成为单页).

i am trying to use AngularJS (And ui.router) with this template for partials and templating. (To make it single paged).

虽然我的页面呈现得很好，但是 .content-wrapper div 标签在与 angular 一起使用时会得到错误的 min-height 属性 (564px;).但是当我查看 starter.html 示例页面时，它很好 (494px;).

Although my page is rendered fine, the .content-wrapper div tag gets the wrong min-height attribute (564px;) when used with angular. But when i view the starter.html, the sample page, its fine (494px;).

有人可以向我解释为什么这样做吗?这是引导程序吗?角度还是主题?还是组合?

Can someone explain to me why it does this? Is this Bootstrap? Angular or the theme? Or a combination?

源(在 chrome 中呈现，折叠以保持小):

Source (As rendered in chrome, collapsed to keep it small):

在更大的屏幕上观看时也有同样的效果.页脚现在从屏幕上脱落，位于视口之外，并且出现一个滚动条，但没有内容，因为它只是用于测试目的的页眉.

It also does the same when viewed on bigger screens. The footer now falls off the screen, outside the viewport, and a scroll bar appears but there is no content as it is just the page header for testing purposes.

有人知道去哪里看吗?

我发现了问题所在，我还没有找到解决方案:

I found out what the problem is,i havent found a solution yet:

主题使用的app.js中是如下代码:

In the app.js used by the theme is the following code:

 var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
 var window_height = $(window).height();

我将此代码放置在页面底部的脚本标记中并从中发出警报:

I placed this code in a script tag at the bottom of the page and made an alert out of it:

<script>
    var head = $('.main-header').outerHeight();
    var foot = $('.main-footer').outerHeight();
    var window_height = $(window).height();
    alert("Header: " + head + " Footer: " + foot + " Window: " + window_height);
</script>

页眉高度为 NULL，页脚为 31，窗口为 595.当我在控制台中单独执行这些命令时(页面完全呈现后)它给我:页眉:50，页脚:51，窗口高度 595.(51 + 50 = 101.595 - 101 = 494.这是正确的内容包装高度).

Header height is NULL, footer is 31 and window is 595. When i execute these command seperately in the console (After the page is fully rendered) it gives me: header: 50, footer: 51, window height 595. (51 + 50 = 101. 595 - 101 = 494. Which is the correct content wrapper height).

所以 JQuery 无法决定页眉和页脚的高度，可能是因为它们还没有被渲染.所以这可能是 ui.router/Angular 的问题?

So JQuery cant decide the height of the header and footer, probably because they arent rendered yet. So this is probably a ui.router/Angular issue?

我首先加载 angular 和 angular ui 路由器，然后是我的 angular 脚本.然后是 JQuery、bootstrap，最后是主题的 app.js.

I first load angular and angular ui router, then my angular scripts. Then JQuery, bootstrap and finally the app.js for the theme.

有人知道如何解决这个问题吗?

Anyone knows how to solve this?

推荐答案

所以我使用的是 AngularJs2，但我认为问题是一样的.我设法弄清楚的方法是我在 app.js 中创建了一个函数，让 AdminLTE 有一个函数

So I am using AngularJs2, but I think the problem is the same. The way I managed to figure it out was I created a function in app.js for AdminLTE to have a function

function getAdminLTE() {
    return $.AdminLTE
}

在我的打字稿中我有

声明 var getAdminLTE: any;

对于我的 Home 组件，我有

and for my Home component I have

ngOnInit() {
    getAdminLTE().layout.fix()
}

这将在渲染 home 组件后修复布局.不确定是否有更好的方法来完成此操作，但我认为您在描述中抓住了问题的本质.

This will fix the layout after the home component is rendered. Not sure of a nicer way to accomplish this, but I think you captured the essence of the problem in your description.

这篇关于AdminLTE 和 AngularJS 内容包装器的最小高度错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！