Bootstrap Nav Dropdown无法与Yeoman Gulp-Angular一起使用

Question

I have an Angular App built on top of Swiip/generator-gulp-angular and was attempting to add bootstrap nav dropdown menu and found it did not work. 我在Swiip / generator-gulp-angular之上构建了一个Angular应用程序，并试图添加bootstrap nav下拉菜单，但发现它不起作用。

I found a solution in this question Stack Overflow question: Bootstrap Dropdown menu is not working 我在此问题堆栈溢出问题中找到了解决方案：引导程序下拉菜单不起作用

What I would like to do is work out how to alter or configure the Yeoman Generator so that correct styles for dropdown menus are added in 我想做的是弄清楚如何更改或配置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

For people having the same issue, without having to use the official bootstrap JS, or add any custom JS, I've found a working version here : 对于有相同问题的人，而不必使用官方的引导JS或添加任何自定义JS，我在这里找到了一个有效的版本：

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

Notice the dropdown="" on the li and the extra attributes on the a (dropdown toggle). 注意dropdown=""上的li和在所述额外的属性a （下拉切换）。

Edit: Just found out that this applies to old versions of UI-Bootstrap. 编辑：刚发现这适用于旧版本的UI-Bootstrap。 Otherwise, the attributes prefixed with uib- should work. 否则，以uib-为前缀的属性应该起作用。

Answer 2

On further investigation, I found out that the real issue is that navbars don't play that well in angular unless you add some custom code. 在进一步调查中，我发现真正的问题是导航栏在角度上的表现不佳，除非您添加一些自定义代码。

I had thought that navbar was natively handled in angular-bootstrap, that does not appear to be the case. 我以为navbar是在angular-bootstrap中本地处理的，事实并非如此。

I ended up using this link to annotate my navbar and dropdowns with click events for open and close. 我最终使用此链接为打开和关闭的点击事件注释了导航栏和下拉菜单。

Twitter Bootstrap Navbar with Angular JS - Collapse not functioning 带有Angular JS的Twitter Bootstrap Navbar-折叠不起作用

Bootstrap Nav Dropdown无法与Yeoman Gulp-Angular一起使用

问题描述

2 个解决方案

解决方案1
1 2016-02-03 14:36:37

解决方案2
0 2015-10-16 03:25:57

Bootstrap Nav Dropdown无法与Yeoman Gulp-Angular一起使用

问题描述

2 个解决方案

解决方案1 1 2016-02-03 14:36:37

解决方案2 0 2015-10-16 03:25:57

解决方案1
1 2016-02-03 14:36:37

解决方案2
0 2015-10-16 03:25:57