Question

我有一个构建在Swiip/generator-gulp-angular之上的Angular应用程序，并且正在尝试添加bootstrap nav下拉菜单，发现它无效。

我在这个问题中找到了一个解决方案Stack Overflow问题：Bootstrap Dropdown menu is not working

我想要做的是弄清楚如何更改或配置Yeoman Generator，以便在

中添加下拉菜单的正确样式

<!doctype html>
<html ng-app="workibleWidget2">
  <head>
    <meta charset="utf-8">
    <title>workibleWidget2</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <!-- css files will be automatically insert here -->
    <!-- endinject -->
    <!-- endbuild -->

      <!-- ********** This FIXED the menu **********  -->
      <!-- Manually Adding this line has fixed the dropbdown, but now I'm not using the SASS driven bootstrap that comes with this project -->
      <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <!-- ********** This FIXED the menu **********  -->

  </head>
  <body>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div ui-view></div>

    <!-- build:js(src) scripts/vendor.js -->
    <!-- bower:js -->
    <!-- run `gulp inject` to automatically populate bower script dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <!-- js files will be automatically insert here -->
    <!-- endinject -->

    <!-- inject:partials -->
    <!-- angular templates will be automatically converted in js and inserted here -->
    <!-- endinject -->
    <!-- endbuild -->

  </body>
</html>

Answer 1

对于有同样问题的人，无需使用官方引导程序JS，或添加任何自定义JS，我找到了一个正常工作的版本here：

<li class="dropdown" dropdown="">
    <a role="button" class="dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
        Directives <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#accordion">Accordion</a></li>
        <li><a href="#alert">Alert</a></li>
        <li><a href="#buttons">Buttons</a></li>
        <li><a href="#carousel">Carousel</a></li>
        <li><a href="#collapse">Collapse</a></li>
        <li><a href="#datepicker">Datepicker</a></li>
        <li><a href="#dropdown">Dropdown</a></li>
        <li><a href="#modal">Modal</a></li>
        <li><a href="#pagination">Pagination</a></li>
        <li><a href="#popover">Popover</a></li>
        <li><a href="#progressbar">Progressbar</a></li>
        <li><a href="#rating">Rating</a></li>
        <li><a href="#tabs">Tabs</a></li>
        <li><a href="#timepicker">Timepicker</a></li>
        <li><a href="#tooltip">Tooltip</a></li>
        <li><a href="#typeahead">Typeahead</a></li>
    </ul>
</li>

注意dropdown=""上的li和a上的额外属性（下拉切换）。

编辑：刚刚发现这适用于旧版本的UI-Bootstrap。否则，前缀为uib-的属性应该有效。

Answer 2

在进一步调查中，我发现真正的问题是除非你添加一些自定义代码，否则导航栏在角度方面不能很好地播放。

我原以为navbar是在angular-bootstrap中原生处理的，但事实并非如此。

我最终使用此链接注释我的导航栏和下拉列表，点击事件进行打开和关闭。

Twitter Bootstrap Navbar with Angular JS - Collapse not functioning

Bootstrap Nav Dropdown无法与Yeoman Gulp-Angular合作

2 个答案: