8

ここにピクルスのディリーがあります。Web サービス呼び出しからマルチレベル ナビゲーション メニューを取得する必要があります。

私のナビゲーション メニューには無限のサブメニューを含めることができるため、親/子ナビゲーション構造を構築するために再帰ディレクティブを使用する必要がありました。今、それを機能的なドロップメニュー構造に変える方法を見つけようとしています。angularui-bootstrap を見ていましたが、いくつかの基本的なドロップメニュー機能を備えたドロップダウン トグルがありますが、再帰ディレクティブを使用したため、メニュー構造には既に angularjs で生成された css クラスがアタッチされています。angularjs-bootstrap ドロップメニューには、angularjs で生成されたクラスとは異なる css クラスがあります。

<ul>
    <li ng-repeat="parent in parents" class="ng-scope">
        <recursive-list-item on-node-click="onNodeClickFn(node)" parent="parent" class="ng-isolate-scope ng-scope">
            <a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Clothes</a>
            <!-- ngIf: parent.children.length > 0 -->
            <ul data-ng-if="parent.children.length &gt; 0" class="ng-scope">
                <!-- ngRepeat: child in parent.children -->
                <li ng-repeat="child in parent.children" class="ng-scope">
                    <recursive-list-item data-on-node-click="onNodeClickFn(node)" data-parent="child" class="ng-isolate-scope ng-scope">
                        <a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Gortex Jackets</a>
                        <!-- ngIf: parent.children.length > 0 -->
                    </recursive-list-item>
                </li>
                <!-- end ngRepeat: child in parent.children -->
                ...
                ...
                ...
            </ul>
        </recursive-list-item>
    </li>
    <!-- end ngRepeat: child in parent.children -->
...
...
</ul>

これは、再帰ナビゲーション メニューの最終出力として生成される html の例です。このように設定すると、すべてのサブメニューの ng-click がアクティブになり、メイン コントローラーと同じスコープを持ちます (ドロップ メニューのように見えないことを除けば、すべてダンディです)。

angularjs-bootstrap のドロップメニュー構造の例を次に示します。

<li class="dropdown" ng-controller="DropdownCtrl">
  <a class="dropdown-toggle">
    Click me for a dropdown, yo!
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="choice in items">
      <a>{{choice}}</a>
    </li>
  </ul>
</li>

私のものとは非常に異なるcssクラス構造を持っているため、angularjs-bootstrapの「ドロップダウン」は私のものでは機能しません。

誰か私に提案はありますか？Web サービス呼び出しを介して json を介してナビゲーション構造を取得しているため、親/子メニュー構造を作成するには、再帰的な angularjs を使用する必要があることに注意してください。

ここで生成されたディレクティブ html について誰かが混乱している場合は、カスタム ディレクティブ コードを表示できますが、簡潔にするよう求められない限り表示しません。私のカスタム ディレクティブ コードは、ナビゲーション構造を構築するためだけに機能し、すべてのディレクティブ スコープをメイン コントローラーのスコープに接続したままにします (つまり、アクティブなクリック) が、スタイル/スクロール アクティブではありません。

私の機能しないメニュー ナビゲーション

*****UPDATE******** ほぼ同じプランカーの複製を作成しました。私のプロジェクトでは、angularjs サービスからナビゲーション メニュー データを取得していました。これは、サーバー上の残りの Web サービスへの Web サービス呼び出しを行いますが、ここにはそれがないため、それぞれの json を手動で作成しました。 REST Web サービス呼び出しを行うサービス。重要な部分は再帰ディレクティブです。すぐ下に plunker プロジェクトへのリンクがあります。誰かが私を助けることができますか？

プランカープロジェクト ------------------------------------------------ -------------

*************新しい更新***************** Charlietfl からのコメントによると、ナビゲーション ドロップメニュー構造に複数の CSS クラスを含めることができます。angularui-bootstrap でこれを試みています。これを自分のプロジェクトに追加するための指示に従い、古い plunker プロジェクトに基づいて新しい Plunker プロジェクトを作成しましたが、追加のドロップメニュー css クラスがナビゲーション構造に追加されました。プランカー プロジェクトは次のとおりです: プランカー プロジェクト

ナビゲーション要素は引き続き DOM に表示されますが、表示されません。最初の ul 要素の css を見たところ、次のようになっています。

*, *:before, *:after {
    -moz-box-sizing: border-box;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
}
.dropdown-menu {
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 14px;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

これは、公式のブートストラップ css ファイルから取得されました。なぜ表示されないのか正確にはわかりません。役立つかどうかはわかりませんが、ul の直後の li 要素の CSS は次のとおりです。

*, *:before, *:after {
    -moz-box-sizing: border-box;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
}
.dropdown {
    position: relative;
}
.dropup, .dropdown {
    position: relative;
}
li {
    line-height: 20px;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
}

angularui-bootstrap に必要な css タグを追加したときから始まる更新されたコードを確認するには、plunker ページに移動する必要があることに注意してください。非表示のナビゲーション要素を表示するには、Firebug などの DOM を表示する必要があります。

angularui-bootstrap css クラスを試して作業するための更新からの (DOM からの) html 最終出力の例を次に示します。

...
<li ng-repeat="child in parent.children" class="dropdown ng-scope">
            <recursive-list-item data-on-node-click="onNodeClickFn(node)" data-parent="child" class="ng-isolate-scope ng-scope">
            <a class="dropdown-toggle ng-scope ng-binding" href="javascript:void(0)">Kids Clothes</a>
...

angularui-bootstrap ライブラリが機能しない理由は、「li」要素の子要素であり、「a」要素の親要素である「recursive-list-item ..」要素が原因であると思われます。私のこの勘は正しいでしょうか？

4

1 に答える 1