Question

我这里有一个泡菜。我必须从网络服务电话中获取我的多级导航菜单。

由于我的导航菜单中包含无限量的子菜单，我不得不使用递归指令来构建我的父/子导航结构。现在我想弄清楚如何将它变成一个功能性的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-click都是活动的，它们与主控制器具有相同的范围（所有都是花花公子，除了它看起来不像一个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感到困惑，我可以显示我的自定义指令代码，但除非要求简洁，否则不会。我的自定义指令代码仅用于构建导航结构，并保持所有指令范围连接到主控制器的范围（即：单击活动），但它没有样式/滚动活动。

My Non Functional Menu Navigation

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

Plunker Project ------------------------------------------ -------------------

************* NEWER UPDATE ***************** 来自Charlietfl的评论我可以在导航dropmenu结构中拥有多个css类。我正在尝试使用angularui-bootstrap。我按照说明将此添加到我的项目中，并基于旧的plunker项目创建了一个新的Plunker项目，但是在导航结构中添加了额外的dropmenu css类。这是Plunker项目：Plunker Project

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

Live demo here (click).

<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"
            }
          ]
        }
      ]
    }
  ];
});

嵌套下拉列表的更新：

<强> Live demo here (click).

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

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

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

1 个答案:

嵌套下拉列表的更新：