angularJSとangularstrapでjqueryフルカレンダーを使用しています。問題は、カレンダーのボタンの 1 つをクリックするか、ブラウザ ウィンドウのサイズを変更したときにのみ、カレンダーが表示されることです。このカレンダーは、angularstrap を使用して初期化されたモーダル ボックスに読み込まれています。
助けてくれてありがとう。
Plunkr はこちら: LINK
モーダル HTML は search_modal.html にあります。 Calendar コントローラは:calendarCtrl.js 親コントローラは search.js です。
編集: Google マップと実装しようとしたギャラリーで同じ問題が発生した後、これはカレンダーに直接関連する問題ではなく、モーダル ボックス自体に関連する問題だとは思いません。インタラクティブで JavaScript を含むものは、モーダル ボックスのサイズに応じて適切にスケーリングされません。誰でもこれを修正する方法について何か考えがありますか?
問題は、モーダルが表示されていないときにカレンダーが初期化されることです。モーダルがコントローラーにある場合、$scope.$on('modal-shown', function() {});何らかの方法でトリガーするために使用できる可能性がありますcalendar('render');。
可視性を検出する方法がわかりませんでした。のディレクティブで $watch を使用しようとしましたelm.is(':visible')が、ロード時に 2 回しかチェックできませんでした。
あなたの問題は、Twitter Bootstrap ドロップダウンで 2 つの Linkedin フォロー ボタンを一覧表示するにはどうすればよいですか
あなたのモーダルは次のように設定されています：
<a data-bs-modal="'search_modal.html'" href="#" class="ng-scope" data-target="#search_modal-003" data-toggle="modal">Search</a>
<div id="search_modal-003" class="modal hide fade ng-scope in" tabindex="-1" aria-hidden="false">
カレンダーを挿入する前に display:none (スペースを空ける) を削除すると、問題が解決します。#search_modal-003 {display:block; }上記のコードをカスタム CSSに追加します。
settimeout 関数を使用してカレンダーの読み込みを遅らせると、機能します。