我正在構建一個第一次使用angular角色的web應用程序並使用引導程序css(angular ui)。我使用引導程序中的導航欄並使用ng-route路由到ng-templates。一切正常。從bootstraps導航到有角度的頁面模板導航欄下拉
現在我想包含一個下拉按鈕到導航欄中,我可以到達一些額外的路由選擇。我做它像這樣:
<nav class="navbar navbar-default navbar-static-top" role="navigation" ng-controller="NavigationCtrl">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="nav.collapsed=!nav.collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse navbar-right" collapse="nav.collapsed">
<ul class="nav navbar-nav">
<li>
<a href="#/index" ng-click="nav.collapsed=true">
<span class="glyphicon glyphicon-home"></span>
Home
</a>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog"></span>
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-toggle" data-toggle="dropdown" role="menu">
<li>
<a href="#/configA" ng-click="nav.collapsed=true">
<span class="glyphicon glyphicon-dashboard"></span>
ConfigA
</a>
</li>
<li>
<a href="#/configB" ng-click="nav.collapsed=true">
<span class="glyphicon glyphicon-dashboard"></span>
ConfigB
</a>
</li>
<li>
<a href="#/configC" ng-click="nav.collapsed=true">
<span class="glyphicon glyphicon-dashboard"></span>
ConfigC
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
我的路線是這樣的:
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider
// route for the main page
.when("/index", {
templateUrl: "/index"
})
// route for the about page
.when("/configA", {
templateUrl: "/configA"
})
// route for the about page
.when("/configB", {
templateUrl: "/configB"
})
// route for the about page
.when("/configC", {
templateUrl: "/configC"
})
.otherwise({redirectTo: "/index"});
}])
我的模板是在HTML頭部像腳本:
<script type="text/ng-template" id="/index">
<div>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
</div>
</script>
這工作得很好平常鏈接在導航欄中。但是,單擊下拉列表不會工作的聯繫,只是沒有任何反應:(我錯過了一些東西在這裏?
這也不起作用。我必須使用#,因爲我正在處理本地文件,所以我只能使用可以通過#/地址引用的ng-templates。正如我所說的,它適用於所有標準導航欄鏈接,但不能與下拉列表中的鏈接相關。 – Fidel90 2014-10-01 09:53:19
當您刪除ng-click =「nav.collapsed = true」時,它是否仍然發生? – 2014-10-01 09:57:21
是的,刪除後沒有變化:(以下鏈接手動工作順便說一句,所以我想沒有路由配置的問題。 – Fidel90 2014-10-01 09:59:53