web-dev-qa-db-ja.com

再帰ディレクティブから生成されたメニュー構造のAngularJSマルチレベルドロップダウンメニュー

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

ナビゲーションメニューには無限の数のサブメニューを含めることができるため、再帰ディレクティブを使用して親/子ナビゲーション構造を構築する必要がありました。今、私はそれを機能的なドロップメニュー構造に変える方法を見つけようとしています。私はangularui-bootstrapを調べていましたが、ドロップダウントグルがあり、基本的なドロップメニュー機能がいくつかありますが、再帰ディレクティブを使用したため、メニュー構造にはすでにangularjsで生成されたcssクラスがアタッチされています。 anglejs-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について誰かが混乱している場合は、カスタムディレクティブコードを表示できますが、簡潔にするように求められない限り表示されません。私のカスタムディレクティブコードは、ナビゲーション構造を構築するためだけに機能し、すべてのディレクティブスコープをメインコントローラーのスコープに接続したままにします（つまり、クリックアクティブ）が、スタイル設定/スクロールアクティブではありません。

My Non Functional Menu Navigation

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

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

*************新しい更新*****************ナビゲーションドロップメニュー構造に複数のcssクラスを含めることができるというCharlietflからのコメント。私はangularui-bootstrapでこれを試みています。これをプロジェクトに追加するための指示に従い、古いプランカープロジェクトに基づいて新しいプランカープロジェクトを作成しましたが、ナビゲーション構造に追加のドロップメニュー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;
}

公式のbootstrap 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;
}

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

これは、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>
...

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

javascriptangularjsangularjs-directiveangularjs-bootstrap
8
David Pugh

これは私が使用しているものであり、かなり甘い追加機能がたくさんあります。使用法を参照してください$scope.menuそして、ドロップダウンを展開するとどうなるか-ヘッダーや仕切りを入れたり、クリック機能を付けたりすることもできます。 ulはいくつでもネストでき、トグルは機能しますが、クリックしてサブメニューを開くとその親が非表示になるため、役に立たないことに注意してください。私の知る限り、メニューをより深くネストしたい場合は、ホバーを使用して独自のjavascriptハンドラーまたはカスタムcssを作成する必要があります。

ライブデモはこちら（クリック）

<nav>
  <div menu="menu"></div> <!-- the element here doesn't matter -->
</nav>

js：

var app = angular.module('myApp', ['ui.bootstrap']);

app.directive('menu', function() {
  return {
    restrict: 'A',
    scope: {
      menu: '=menu',
      cls: '=ngClass'
    },
    replace: true,
    template: '<ul><li ng-repeat="item in menu" menu-item="item"></li></ul>',
    link: function(scope, element, attrs) {
      element.addClass(attrs.class);
      element.addClass(scope.cls);
    }
  };
});

app.directive('menuItem', function($compile) {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      item: '=menuItem'
    },
    template: '<li active-link><a href={{item.href}}>{{item.title}}</a></li>',
    link: function (scope, element, attrs) {
      if (scope.item.header) {
        element.addClass('nav-header');
        element.text(scope.item.header);
      }
      if (scope.item.divider) {
        element.addClass('divider');
        element.empty();
      }
      if (scope.item.submenu) {
        element.addClass('dropdown');

        var text = element.children('a').text();
        element.empty();
        var $a = $('<a class="dropdown-toggle">'+text+'</a>');
        element.append($a);

        var $submenu = $('<div menu="item.submenu" class="dropdown-menu"></div>');
        element.append($submenu);
      }
      if (scope.item.click) {
        element.find('a').attr('ng-click', 'item.click()');
      }
      $compile(element.contents())(scope);
    }
  };
});

app.controller('myCtrl', function($scope) {
  $scope.menu = [
    {
      "title": "Home",
      "href": "#"
    },
    {
      "title": "About",
      "href": "about"
    },
    {
      "title": "History",
      "href": "about/history"
    },
    {
      "title": "Contact",
      "href": "contact"
    },
    {
      "title": "Other things - in a list. (Click here)",
      "submenu": [
        {
          "header": "Sample Header"
        },
        {
          "title": "Some Link",
          "href": "some/place"
        },
        {
          "title": "Another Link",
          "href": "some/other/place"
        },
        {
          "divider": "true"
        },
        {
          "header": "Header 2"
        },
        {
          "title": "Again...a link.",
          "href": "errrr"
        },
        {
          "title": "Nest Parent",
          "submenu": [
            {
              "title": "nested again",
              "href": "nested/again"
            },
            {
              "title": "me too",
              "href": "sample/place"
            }
          ]
        }
      ]
    }
  ];
});

ネストされたドロップダウンの更新：

ライブデモはこちら（クリック）

.dropdown-menu .dropdown-menu {
  margin: 0;
  left: 100%;
  top: -5px;
}

.dropdown-menu li:hover .dropdown-menu {
  display: block;
}
7
m59