AngularJS多级下拉菜单,用于从递归指令生成的菜单结构

Question

我这里有一个泡菜.我必须通过webservice调用获取我的多级导航菜单.

由于我的导航菜单中可以包含无限量的子菜单,因此我不得不使用递归指令来构建我的父/子导航结构.现在我想弄清楚如何将它变成一个功能性的dropmenu结构.我正在看看angularui-bootstrap,他们有一个Dropdown Toggle,它有一些基本的dropmenu功能,但由于我使用了递归指令,我的菜单结构已经有了angularjs生成的css类附加到它们.angularjs-bootstrap dropmenu有css类,它们与我的angularjs生成的类不同....看哪!

<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-点击的是活动的,并且它们具有相同的范围作为主控制器(全部是花花公子,除了它看起来并不像一个dropmenu)

以下是angularjs-bootstrap的dropmenu结构示例

<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的'dropdown'不适用于我的.

有人对我有什么建议吗？请记住,因为我通过webservice调用通过json获取导航结构,所以我必须使用递归angularjs来创建父/子菜单结构.

如果有人对我在这里生成的指令html感到困惑,我可以显示我的自定义指令代码,但除非要求简洁,否则不会.我的自定义指令代码适用于只是建立导航结构,并保持所有连接到主控制器的范围指令范围(即:点击活动),但它不是风格/滚动活跃.

*****UPDATE********我创建了一个几乎相同的plunker复制.在我的项目中,我从angularjs服务获取导航菜单数据,这将在我的服务器上进行web服务调用,但是我没有这个,所以我只是手动为我的每一个创建json进行REST Web服务调用的服务.重要的部分是递归指令.在下面你会找到plunker项目的链接.有人可以帮我吗？

Plunker项目 ------------------------------------------------ -------------

*************NEWER UPDATE*****************来自Charlietfl的评论我可以在导航dropmenu结构中拥有多个css类.我正在尝试使用angularui-bootstrap.我跟着添加这对我的项目的指示,创建基于旧plunker项目的新Plunker项目,但与添加到导航结构的额外dropmenu CSS类.这是Plunker项目: Plunker项目

导航元素仍然显示在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;
}

请记住,您必须从plunker页面查看更新的代码,从我添加angularui-bootstrap所需的css标签开始.要查看隐形导航元素,您需要使用Firebug之类的东西来查看DOM.

下面是我更新的一些html final输出(来自DOM)的示例,尝试使用angularui-bootstrap css类.

...
<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库不起作用的原因是因为"recursive-list-item .."元素是"li"元素的子元素,而父元素是"a"元素.我的预感是正确的吗？

Answer 1

这是我使用的,它有很多额外的功能,非常甜蜜.查看用法$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;
}