オプションのスライド サイドバー メニューを使用してヘッダー バーをモジュール化しようとしています。現在angular-foundationを使用していますが、これはサイドバーのキャンバス外コンポーネントです。アイデアは、(メニューが必要なページで) サイドバー メニューを開くトリガーとなるヘッダー バー、またはメニューのない単純なヘッダーとして (例: ユーザーがログインしていない場合) を持つことができるということです。
問題は、キャンバス外のサイドバーには 2 つのラッピング レイヤーが必要であり、ページのコンテンツ全体をラップして、メニューのスライドを容易にし、コンテンツを横に押し出すことです。
私のアイデアは、<my-header>sidebar と呼ばれるスコープ属性を持つディレクティブを作成することでした。これを true に設定すると、ページにキャンバス外のサイドバー メニューが含まれます。<my-off-canvas>さらに、魔法のためにいくつかのクラス ディレクティブを使用する必要なラッピング div を含むテンプレートを持つ、別の「ヘルパー」ディレクティブを作成しました。
plunkr は次のとおりです: http://plnkr.co/edit/5f6gUh0AixRNibs1rZTa?p=preview
問題:ラッパー
は<my-off-canvas>テンプレートにコンパイルされず、<my-off-canvas>ディレクティブとして残ります。offCanvasList適切なラッパーとクラス ディレクティブを手動で追加して動作させたところ、一部のクラス ディレクティブとleftOffCanvasToggle、キャンバス外機能の 2 つのラッピング レイヤーの一部であるディレクティブとコントローラーが必要なため、いくつかの依存関係の問題がありました。
現在、これをどのように実装すべきかについてのアイデアを探していますが、おそらくこのアプローチは結局実行可能ではなく、別の実装を選択する必要がありますか? ディレクティブに関してはあまり経験がないので、提案やアイデアを受け入れます。