Bootstrap Nav Dropdown 不适用于 Yeoman Gulp-Angular答案

【问题标题】：Bootstrap Nav Dropdown not working with Yeoman Gulp-AngularBootstrap Nav Dropdown 不适用于 Yeoman Gulp-Angular
【发布时间】：2016-03-18 18:22:56
【问题描述】：

我有一个基于 Swiip/generator-gulp-angular 构建的 Angular 应用程序，并试图添加引导导航下拉菜单，但发现它不起作用。

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

我想做的是研究如何更改或配置 Yeoman 生成器，以便为下拉菜单添加正确的样式

<!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>

【问题讨论】：

标签： angularjs twitter-bootstrap yeoman-generator

【解决方案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>

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

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

【讨论】：

【解决方案2】：

经过进一步调查，我发现真正的问题是导航栏在 Angular 中的播放效果不佳，除非您添加一些自定义代码。

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

我最终使用此链接为我的导航栏和下拉菜单添加了打开和关闭的点击事件。

Twitter Bootstrap Navbar with Angular JS - Collapse not functioning

【讨论】：