0

我正在構建一個第一次使用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> 

這工作得很好平常鏈接在導航欄中。但是,單擊下拉列表不會工作的聯繫,只是沒有任何反應:(我錯過了一些東西在這裏?

回答

0

你必須創建一個ANCOR鏈接。

只需創建一個真正的鏈接,它應該正常工作:

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

這也不起作用。我必須使用#,因爲我正在處理本地文件,所以我只能使用可以通過#/地址引用的ng-templates。正如我所說的,它適用於所有標準導航欄鏈接,但不能與下拉列表中的鏈接相關。 – Fidel90 2014-10-01 09:53:19

+0

當您刪除ng-click =「nav.collapsed = true」時,它是否仍然發生? – 2014-10-01 09:57:21

+0

是的,刪除後沒有變化:(以下鏈接手動工作順便說一句,所以我想沒有路由配置的問題。 – Fidel90 2014-10-01 09:59:53