2

パーシャルとテンプレート化のために、このテンプレートで AngularJS (および ui.router) を使用しようとしています。（シングルページにするため）。

私のページは正常にレンダリングされますが、 angular で使用すると.content-wrapperdiv タグが間違ったmin-height属性 (564px;) を取得します。しかし、サンプルページを表示するstarter.htmlと、問題ありません（494px;）。

誰かがなぜこれを行うのか説明できますか? これはブートストラップですか？角度またはテーマ？それとも組み合わせ？

ソース (クロムでレンダリングされ、小さく保つために折りたたまれています): クロムでレンダリングされたソース

大きな画面で表示した場合も同様です。フッターはビューポートの外で画面からはみ出し、スクロール バーが表示されますが、テスト用のページ ヘッダーにすぎないため、コンテンツはありません。

誰がどこを見ればいいのか考えましたか？

編集：

私は問題が何であるかを見つけましたが、まだ解決策を見つけていません:

テーマで使用される app.js には、次のコードがあります。

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

このコードをページの下部にあるスクリプト タグに配置し、アラートを作成しました。

<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. これは正しいコンテンツ ラッパーの高さです)。

そのため、JQuery はヘッダーとフッターの高さを決定できません。おそらく、まだレンダリングされていないためです。これはおそらく ui.router/Angular の問題ですか?

最初に angular および angular ui ルーターをロードし、次に angular スクリプトをロードします。次に、JQuery、ブートストラップ、最後にテーマの app.js です。

誰でもこれを解決する方法を知っていますか?

4

4 に答える 4

3

なのでAngularJs2を使っていますが、問題は同じだと思います。私がなんとかそれを理解する方法はapp.js、AdminLTEに関数を持たせるために関数を作成したことでした

function getAdminLTE() {
    return $.AdminLTE
}

そして私のタイプスクリプトには

declare var getAdminLTE: any;

そして私のホームコンポーネントのために私は持っています

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

これにより、ホーム コンポーネントがレンダリングされた後にレイアウトが修正されます。これを達成するためのより良い方法はわかりませんが、あなたの説明で問題の本質を捉えたと思います.

于 2016-04-30T18:00:06.207 に答える