Bootstrap Nav Dropdown不能與Yeoman Gulp-Angular一起工作

我有一個建立在Swiip/generator-gulp-angular之上的Angular應用程序，並試圖添加引導程序的導航下拉菜單，發現它不起作用。Bootstrap Nav Dropdown不能與Yeoman Gulp-Angular一起工作

我發現在這個問題上堆棧溢出問題的解決方案：Bootstrap Dropdown menu is not working

我想這樣做的是解決如何改變或配置約曼發電機，使正確的樣式下拉菜單在

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

來源

2015-10-16 David Cruwys

添加在進一步的調查，我發現真正的問題是，除非你添加一些自定義代碼導航欄不會打得那麼好於角。

我原以爲導航欄本來是在角度引導下處理的，看起來並非如此。

我結束了使用這個鏈接來註釋我的導航欄和下拉菜單點擊事件打開和關閉。

Twitter Bootstrap Navbar with Angular JS - Collapse not functioning

來源

2015-10-16 03:25:57

對於有同樣的問題，而不必使用官方的引導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-爲前綴的屬性應起作用。

來源

2016-02-03 14:36:37

這個效果很好！ –

Bootstrap Nav Dropdown不能與Yeoman Gulp-Angular一起工作

回答

相關問題