8

我这里有点咸菜。我必须从网络服务调用中获取我的多级导航菜单。

由于我的导航菜单中可以有无限数量的子菜单，因此我不得不使用递归指令来构建我的父/子导航结构。现在我想弄清楚如何将它变成一个功能性的下拉菜单结构。我正在查看 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 都处于活动状态，并且它们具有与主控制器相同的范围（除了看起来不像下拉菜单之外，一切都很花哨）

这是 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 的“下拉菜单”不适用于我的。

有人对我有什么建议吗？请记住，由于我通过 web 服务调用通过 json 获取导航结构，因此我必须使用递归 angularjs 来创建父/子菜单结构。

如果有人对我在此处生成的指令 html 感到困惑，我可以显示我的自定义指令代码，但除非要求简洁，否则不会。我的自定义指令代码仅用于构建导航结构，并保持所有指令范围连接到主控制器的范围（即：单击活动），但它不是样式/滚动活动。

我的非功能性菜单导航

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

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

*************新更新********************** Charlietfl 的评论说，我的导航下拉菜单结构中只能有多个 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;
}

它是从官方引导 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。

这是我的更新中的一些 html 最终输出（来自 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”元素。我的这个预感正确吗？

4

1 回答 1

7

这就是我使用的，它有很多非常棒的额外功能。查看用法$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;
}
于 2013-11-24T21:18:44.073 回答